<script setup>
import {
  onMounted,
  nextTick,
  ref,
  reactive,
  watch,
  computed,
  watchEffect,
  onUnmounted,
} from "vue";
import {
  getForecast,
  getTide,
  login,
  getTide24,
  getTideMonth,
  getDisaster,
  getDisasterByYear,
  seriesQueries,
  searchNumberForecastByType,
  determinePngExist,
  getWarning,
  lookAlarm,
  searchDepartmentName,
  searchAllPnt,
  getNewNumberForecastByTypeAndDepart,
  seriesQueriesNew,
  getViewByTypeAndDepartId,
  getSequence,
  lookPdf,
} from "../network/net.js";
import {
  initMap,
  addForecastLayer,
  removeForecastLayer,
  removeForecastLayerL,
  thisLayerG,
  thisLayerL,
  pointInfo,
} from "../components/module/Class_Map.js";
import { getFileData, getTideData, getYbData, getYjData, getZybData } from "../network/dalian.js";
import Config from "../components/module/Class_Map.js";
import icon1 from "../assets/img/icon-图层.png";
import iconActive1 from "../assets/img/icon-图层-1.png";
import icon2 from "../assets/img/icon-定位.png";
import iconActive2 from "../assets/img/icon-定位-1.png";
import icon3 from "../assets/img/icon-缩小.png";
import iconActive3 from "../assets/img/icon-缩小-1.png";
import icon4 from "../assets/img/icon-放大.png";
import iconActive4 from "../assets/img/icon-放大-1.png";
import iconTime from "../assets/img/icon-时间.png";
import iconWheather from "../assets/img/icon-weather.png";
import iconWu from "../assets/img/icon-雾.png";
import iconHaifeng from "../assets/img/icon-海风.png";
import iconHailang from "../assets/img/icon-海浪.png";
import iconHailiu from "../assets/img/icon-海流.png";
import iconHaifengActive from "../assets/img/沿海风情.png";
import iconHailangActive from "../assets/img/海浪-copy.png";
import iconHailiuActive from "../assets/img/微波.png";
import iconSz from "../assets/img/icon-数值法.png";
import iconActiveSz from "../assets/img/icon-数值法-1.png";
import iconLi from "../assets/img/icon-粒子法.png";
import iconActiveLi from "../assets/img/icon-粒子法-1.png";
import iconJian from "../assets/img/icon-箭头法.png";
import iconActiveJian from "../assets/img/icon-箭头法-1.png";
import iconFeng from "../assets/img/icon-风.png";
import iconLang from "../assets/img/icon-浪.png";
import iconTian from "../assets/img/icon-tianqi.png";
import iconWaveNo from "../assets/img/wave-no.png";
import iconFbcNo from "../assets/img/fbc-no.png";

import iconHw from "../assets/img/hw.png";
import iconHwActive from "../assets/img/hw_ac.png";

// 气温
import iconQw from "../assets/img/qw.png";
import iconQwActive from "../assets/img/qw_ac.png";

// surge
import iconSurge from "../assets/img/surge.png";
import iconSurgeActive from "../assets/img/surge_ac.png";

// import iconTime from '../assets/img/icon-时间.png'
// import tideData from "../assets/json/tide.json";
import * as echarts from "echarts";
import { reactify, useDraggable } from "@vueuse/core";
// import Config from '../components/mapInfoObj/mapConfig.js'
// import { removeOtherLayer, addnoseaLayer, removenoseaLayer } from '../components/mapInfoObj/initMap.js'
import { formatTime, addHours } from "../utils/cTime.js";
import { ElMessage } from "element-plus";
import tideMonth from "../assets/json/tideMonth.json";
import TyphoonForecast from "../components/TyphoonForecast/index.js";
import chun from "../stores/chun.js";
import iconGantan from "../assets/img/感叹号.png";
import iconWaveLan from "../assets/img/wave_lan_simple.png";
import iconWaveHuang from "../assets/img/wave_huang_simple.png";
import iconWaveHong from "../assets/img/wave_hong_simple.png";
import iconWaveCheng from "../assets/img/wave_cheng_simple.png";
import iconWaveInfo from "../assets/img/wave_info_simple.png";
import iconStormLan from "../assets/img/fbc_lan_simple.png";
import iconStormHuang from "../assets/img/fbc_huang_simple.png";
import iconStormHong from "../assets/img/fbc_hong_simple.png";
import iconStormCheng from "../assets/img/fbc_cheng_simple.png";
import iconStormInfo from "../assets/img/fbc_info_simple.png";
import iconBofang from "../assets/img/bofang.png";
import iconZanting from "../assets/img/zanting.png";
// 综合预报,数值预报,潮汐预报,灾害预警,台风路径
import iconZonghe from "../assets/img/icon-综合预报.png";
import iconShuzhi from "../assets/img/icon-数值预报.png";
import iconChaoxi from "../assets/img/icon-潮汐预报.png";
import iconZaihai from "../assets/img/icon-灾害预警.png";
import iconTaifeng from "../assets/img/icon-台风路径.png";
import iconZongheActive from "../assets/img/icon-综合预报-1.png";
import iconShuzhiActive from "../assets/img/icon-数值预报-1.png";
import iconChaoxiActive from "../assets/img/icon-潮汐预报-1.png";
import iconZaihaiActive from "../assets/img/icon-灾害预警-1.png";
import iconTaifengActive from "../assets/img/icon-台风路径-1.png";
import iconClose from "../assets/img/关闭.png";

import iconHaibing from "../assets/img/海冰.png";
import iconZhoubao from "../assets/img/周报.png";
import iconWenjian from "../assets/img/文件.png";
import iconGDC from "../assets/img/高低潮.png";

import iconTl from "../assets/img/icon-台风图例.png";
import iconTf from "../assets/img/icon-台风路径.png";
import iconTfActive from "../assets/img/台风-1.png";
import iconTlActive from "../assets/img/台风图例-1.png";
import iconXia from "../assets/img/下拉.png";
import iconShang from "../assets/img/上拉.png";
import lineCircle from "../assets/img/arrow-up.png";
import iconTide from "../assets/img/潮位站.png";
import ComPdfW from "../components/ComPdfW.vue";
import linesData from "../assets/json/lines.json";
import { smRange } from "../stores/chun.js";
import dayjs from 'dayjs' // 需要安装dayjs


// router
import { useRouter } from "vue-router";
import axios from "axios";
import ybData from "../assets/json/ybData.json";
import tideData from "../assets/json/tideData.json";
import zybData from "../assets/json/zybData.json";
import yjData1 from "../assets/json/yjData.json";
import fileData from "../assets/json/fileData.json";
import chinaBorder from "../assets/json/china.json";
// console.log(ybData);


let bm = sessionStorage.getItem("bm");
let bmInfo = sessionStorage.getItem("bmInfo");

bm = ref(bm);
bmInfo = ref(JSON.parse(bmInfo));

const docurl = import.meta.env.VITE_backurl_DOC;

const router = useRouter();
const url_go = import.meta.env.VITE_backurl_SHUMO;

let token = sessionStorage.getItem("token");
let map = null;
const alarmYears = ref([]);
let warningValue = ref();
const chartRange = ref([0, 72]);
let forecastDate = ref("");
let semiCircle = null;
let tideStation = null;
let tideIcon = L.icon({
  iconUrl: iconTide,
  iconSize: [35, 35],
  iconAnchor: [17, 17],
});
let tideIconSmall = L.icon({
  iconUrl: iconTide,
  iconSize: [25, 25],
  iconAnchor: [12, 12],
});


let allP = [];

watch(bm, (val) => {
  for (let key in smRange) {
    smRange[key] = {}
  }
  allP = [];

  // smRange['wind'] = {
  //   scale_lon: 0.03,
  //   scale_lat: 0.03,
  //   scale: 0.03,
  //   startLat: 42.199153900146484,
  //   endLat: 36.19267272949219,
  //   startLon: 116.68069458007812,
  //   endLon: 125.5948486328125,

  //   maxLat: 42.199153900146484,
  //   minLat: 36.19267272949219,
  //   maxLon: 125.5948486328125,
  //   minLon: 116.68069458007812,

  //   width: 297,
  //   height: 200,
  //   precision: 0.03,
  //   parentDirectory: '',
  //   pngName: ''
  // }

  smRange['wind'] = {
    scale_lon: 0.25,
    scale_lat: 0.25,
    scale: 0.25,
    startLat: 41,
    endLat: 36,
    startLon: 116,
    endLon: 126,

    maxLat: 41,
    minLat: 36,
    maxLon: 126,
    minLon: 116,

    width: 40,
    height: 20,
    precision: 0.25,
    parentDirectory: '',
    pngName: ''
  }


  smRange['current'] = {
    scale_lon: 0.25,
    scale_lat: 0.25,
    scale: 0.25,
    startLat: 41,
    endLat: 36,
    startLon: 116,
    endLon: 126,

    maxLat: 41,
    minLat: 36,
    maxLon: 126,
    minLon: 116,

    width: 40,
    height: 20,
    precision: 0.25,
    parentDirectory: '',
    pngName: ''
  }

  smRange['wave'] = {
    scale_lon: 0.25,
    scale_lat: 0.25,
    scale: 0.25,
    startLat: 41,
    endLat: 36,
    startLon: 116,
    endLon: 126,

    maxLat: 41,
    minLat: 36,
    maxLon: 126,
    minLon: 116,

    width: 40,
    height: 20,
    precision: 0.25,
    parentDirectory: '',
    pngName: ''
  }

  smRange['surge'] = {
    scale_lon: 0.05,
    scale_lat: 0.05,
    scale: 0.05,
    startLat: 41,
    endLat: 23,
    startLon: 117.5,
    endLon: 131.3,

    maxLat: 41,
    minLat: 23,
    maxLon: 131.3,
    minLon: 117.5,

    width: 276,
    height: 356,
    precision: 0.05,
    parentDirectory: '',
    pngName: ''
  }

  smRange['temp'] = {
    scale_lon: 0.25,
    scale_lat: 0.25,
    scale: 0.25,
    startLat: 41,
    endLat: 36,
    startLon: 116,
    endLon: 126,

    maxLat: 41,
    minLat: 36,
    maxLon: 126,
    minLon: 116,

    width: 40,
    height: 20,
    precision: 0.25,
    parentDirectory: '',
    pngName: ''
  }

  smRange['seatemp'] = {
    scale_lon: 0.25,
    scale_lat: 0.25,
    scale: 0.25,
    startLat: 41,
    endLat: 36,
    startLon: 116,
    endLon: 126,

    maxLat: 41,
    minLat: 36,
    maxLon: 126,
    minLon: 116,

    width: 40,
    height: 20,
    precision: 0.25,
    parentDirectory: '',
    pngName: ''
  }
}, {
  immediate: true
})



const pdfDialog = ref(false);
let urlObj = {};
let areaNames = ref([])

const checkLogin = () => {
  let token = sessionStorage.getItem("token");
  if (taken) {
    router.push("/login");
  }
}

const getFileDataDo = () => {
  getFileData().then((res) => {
    if (res.status == 200 && res.data.code == 0) {
      forecastFiles.value = res.data.data.forecast_files.filter((item) => {
        // 不包含海冰简报
        return !item.file_name.includes("海冰简报");
      });

      currentReports.value = res.data.data.forecast_files.filter((item) => {
        // 不包含海冰简报
        return item.file_name.includes("海冰简报");
      });

    }
  });
}

const getYjDataDo = () => {
  getYjData().then((res) => {
    if (res.status == 200 && res.data.code == 0) {
      yjList.value = res.data.data;
      yjData.value = res.data.data[0];
    }
  });
}

const getZybDataDo = () => {
  getZybData().then((res) => {
    if (res.status == 200 && res.data.code == 0) {
      weekList.value = res.data.data;
      weekData.value = res.data.data[0];
    }
  });
}

let hourly_tide = [];

const getTideDataDo = () => {
  getTideData().then((res) => {
    if (res.status == 200 && res.data.code == 0) {
      // console.log(res.data.data);
      tableData.value = res.data.data.tide_forecast;
      // tideData.value = res.data.data;
      hourly_tide = res.data.data.hourly_tide;
    }
  });
}

const getYbDataDo = () => {
  getYbData().then((res) => {
    if (res.status == 200 && res.data.code == 0) {
      // console.log(res.data.data);
      forecastData.value = res.data.data;

      // ybList.value = res.data.data;
      // ybData.value = res.data.data[0];
    }
  });
}

onMounted(() => {
  getFileDataDo();
  getYjDataDo();
  getZybDataDo();
  getTideDataDo();
  getYbDataDo();
  initMap();
  let geojson = L.geoJSON(chinaBorder, {
    style: {
      color: "#fff",
      weight: 1,
      fillOpacity: 0,
    },
  }).addTo(Config.mapObj.map);

  seaAreaActive.value = 0;

  // 监听地图点击事件
  Config.mapObj.map.on("click", function (e) {
    // 打印zoom
  });

  Config.mapObj.map.createPane("pane1");
  Config.mapObj.map.getPane("pane1").style.zIndex = 400;

  // alarmYears从今年往前推10年
  alarmYears.value = [];
  let year = new Date().getFullYear();
  for (let i = 0; i < 5; i++) {
    alarmYears.value.push({
      value: year - i,
      label: year - i + "年",
    });
  }

  alarmYear.value = alarmYears.value[0].value;
  // forecastData.value = ybData.forecast_data

  date.value = formatTime(new Date()).split(" ")[0];
  activeShumo.value = "海风";
  Config.mapObj.map.setView([38.5, 120], 7);

});

const nvs = [
  {
    title: "综合预报",
    icon: iconZongheActive,
    iconActive: iconZongheActive,
  },
  {
    title: "数值预报",
    icon: iconShuzhiActive,
    iconActive: iconShuzhiActive,
  },
  {
    title: "潮位预报",
    icon: iconChaoxiActive,
    iconActive: iconChaoxiActive,
  },
  {
    title: "天文潮",
    icon: iconGDC,
    iconActive: iconGDC,
  },
  {
    title: "周预报",
    icon: iconZhoubao,
    iconActive: iconZhoubao,
  },
  {
    title: "海冰简报",
    icon: iconHaibing,
    iconActive: iconHaibing,
  },
  {
    title: "预报文件",
    icon: iconWenjian,
    iconActive: iconWenjian,
  },
  {
    title: "灾害警报",
    icon: iconZaihaiActive,
    iconActive: iconZaihaiActive,
  },
  // {
  //   title: "台风路径",
  //   icon: iconTaifengActive,
  //   iconActive: iconTaifengActive,
  // },
];
const activeNv = ref("综合预报");
const activeHight = ref(350);
const activeHightBq = ref(350);
const isshowArr = ref([true, true, true]);
const handleFold = (item, idx) => {
  isshowArr.value[idx] = !isshowArr.value[idx];
};
const showRight = ref(false);

const replaceMap = {
  NE: "东北",
  NW: "西北",
  SE: "东南",
  SW: "西南",
  N: "北",
  S: "南",
  E: "东",
  W: "西",
  // '-': '到',
  "→": "转",
  "↑": "增大到",
  "↓": "减小到",
  // '▽': '阵风',
};



// 地图工具4个按钮
const tools = [
  {
    title: "定位",
    icon: icon2,
    iconActive: iconActive2,
  },
  {
    title: "缩小",
    icon: icon3,
    iconActive: iconActive3,
  },
  {
    title: "放大",
    icon: icon4,
    iconActive: iconActive4,
  },
  {
    title: "台风",
    icon: iconTf,
    iconActive: iconTfActive,
  },
  {
    title: "图例",
    icon: iconTl,
    iconActive: iconTlActive,
  },
];


const activeArea = ref('')
const forecastData = ref({})

const activeShumo = ref("");
const shumoInfo = ref([
  {
    icon: iconHaifeng,
    iconActive: iconHaifengActive,
    title: "海风",
    layer: "windLayer",
    type: "wind",
    isShow: false,
  },
  {
    icon: iconHailang,
    iconActive: iconHailangActive,
    title: "海浪",
    layer: "waveLayer",
    type: "wave",
    isShow: false,
  },
  {
    icon: iconHailiu,
    iconActive: iconHailiuActive,
    title: "海流",
    layer: "currentLayer",
    type: "current",
    isShow: false,
  },

  // {
  //   icon: iconSurge,
  //   iconActive: iconSurgeActive,
  //   title: "增水",
  //   layer: "surgeLayer",
  //   type: "surge",
  //   isShow: false,
  // },
  {
    icon: iconHw,
    iconActive: iconHwActive,
    title: "海温",
    layer: "surgeLayer",
    type: "surge",
    isShow: false,
  },
  {
    icon: iconQw,
    iconActive: iconQwActive,
    title: "气温",
    layer: "windLayer",
    type: "temp",
    isShow: false,
  },
]);
const handleShumo = (item) => {
  isPop.value = false;
  isShowChart.value = false;
  if (activeShumo.value == item.title) {
    activeShumo.value = "";
    // 取消弹窗
    // removenoseaLayer();
    removeForecastLayer();
    removeForecastLayerL();
    // 隐藏图例
    isShowLegend.value = false;
    // 移除海风时的边界线
    if (boundaryLineLayer1) {
      if (Config.mapObj.map.hasLayer(boundaryLineLayer1)) {
        Config.mapObj.map.removeLayer(boundaryLineLayer1);
      }
      boundaryLineLayer1 = null;
    }
    return;
  }
  activeShumo.value = item.title;

  // let t = formatTime(new Date()).split(' ')[0] + ' 00'
  // // 去除空格和-
  // t = t.replace(/-| /g, '')
  // queryPng(t)
};
// 图例控制
let boundaryLineLayer1 = null;
const isShowLegend = ref(false);
const legendArrData = ref([]);
const isShowChart = ref(false);
const day3 = reactive({
  // startDateTime: formatTime(new Date()).split(" ")[0] + " 08:00",
  // endDateTime: formatTime(addHours(new Date(), 48)).split(" ")[0] + " 08:00",

  startDateTime: formatTime(addHours(new Date(), 1)),
  endDateTime: formatTime(addHours(new Date(), 49)),
});



// 地图工具
const handleTool = (idx) => {
  currentTfPop.value = "";
  currentTfPop.value = "";
  if (idx == 0) {
    Config.mapObj.map.setView([30.245361, 120.962109], 10);
  } else if (idx == 1) {
    Config.mapObj.map.setZoom(Config.mapObj.map.getZoom() - 1);
  } else if (idx == 2) {
    Config.mapObj.map.setZoom(Config.mapObj.map.getZoom() + 1);
  } else if (idx == 3) {
    chun.isTl = false;
    chun.isOpen = !chun.isOpen;
    if (chun.isOpen) {
      currentTfPop.value = "台风";
      if (chun.isOpen) {
        currentTfPop.value = "台风";
      }
    }
  } else {
    chun.isTl = !chun.isTl;
    chun.isOpen = false;
    if (chun.isTl) {
      currentTfPop.value = "图例";
      if (chun.isTl) {
        currentTfPop.value = "图例";
      }
    }
  }
};

// 潮汐部分
const station = ref("1");
const stations = ref([
  {
    value: "1",
    label: "逐时潮位",
  },
  {
    value: "2",
    label: "高低潮",
  },
]);
const date = ref("");
const timeHour = ref(0);
timeHour.value = new Date().getHours() - 8 + 1;
const marks = {
  0: "08h",
  12: "20h",
  24: "08h",
  36: "20h",
  48: "08h",
  60: "20h",
  72: "08h",
};

const tableData = ref([
  {
    date: "08-12",
    timeHigh: "12:00",
    tideHigh: "250",
    timeLow: "18:00",
    tideLow: "-182",
  },
]);

const getTableData = () => {
  // tableData.value = []

  getTide24(token).then((res) => { });
};

const getDqDate = () => {
  if (station.value == 1) {
    // 获取时间范围 06月01日 00时 - 06月02日 00时，当前日期到24小时后
    let dateF1 = formatTime(new Date());
    let dateF2 = formatTime(addHours(new Date(), 23));
    let dateArr1 = dateF1.split(" ")[0].split("-");
    let dateArr2 = dateF2.split(" ")[0].split("-");
    let hour1 = dateF1.split(" ")[1].split(":")[0];
    let hour2 = dateF2.split(" ")[1].split(":")[0];
    return `${dateArr1[1]}月${dateArr1[2]}日${hour1}时-${dateArr2[1]}月${dateArr2[2]}日${hour2}时`;
  } else {
    // 返回例如2024年06月的字符串
    let date = formatTime(new Date()).split(" ")[0];
    let dateArr = date.split("-");
    return `${dateArr[0]}年${dateArr[1]}月`;
  }
};

const tipFormatter = (e) => {
  let t = formatTime(addHours(`${date.value} 08:00`, e)).split("-");
  return `${t[1]}-${t[2].split(":")[0]}h`;
  // return formatTime(addHours(`${date.value} 08:00`, e)).split(':')[0]+'h'
};

const isChart = ref(false);

// 综合预报部分
const seaAreaActive = ref(1);
const handleSea = () => {
  seaAreaActive.value = Math.abs(seaAreaActive.value - 1);
};

// 数值预报部分========================================================
// const

const getChDate1 = (date) => {
  let dateArr = date.split(" ")[0].split("-");
  let hour = date.split(" ")[1].split(":")[0];
  return `${dateArr[1]}月${dateArr[2]}日 ${hour}时`;
};

const activeType = ref("海浪");

const lizis = ref([
  {
    icon: iconActiveLi,
    iconActive: iconActiveLi,
    title: "粒子法",
    isShow: false,
  },
  {
    icon: iconActiveSz,
    iconActive: iconActiveSz,
    title: "数值法",
    isShow: false,
  },
  {
    icon: iconActiveJian,
    iconActive: iconActiveJian,
    title: "箭头法",
    isShow: false,
  },
]);
const activeLi = ref(['粒子法']);
let tempLi = ['粒子法'];

const handleLizi = (item) => {
  if (activeLi.value.includes(item.title)) {
    activeLi.value = activeLi.value.filter((i) => i != item.title);
  } else {
    activeLi.value.push(item.title);
  }
  tempLi = activeLi.value;
};

// 16方向划分
const angleMap = [
  {
    name: "北东北",
    enName: "NNE",
    value: [11.25, 33.75],
  },
  {
    name: "东北",
    enName: "NE",
    value: [33.75, 56.25],
  },
  {
    name: "东东北",
    enName: "ENE",
    value: [56.25, 78.75],
  },
  {
    name: "东",
    enName: "E",
    value: [78.75, 101.25],
  },
  {
    name: "东东南",
    enName: "ESE",
    value: [101.25, 123.75],
  },
  {
    name: "东南",
    enName: "SE",
    value: [123.75, 146.25],
  },
  {
    name: "南东南",
    enName: "SSE",
    value: [146.25, 168.75],
  },
  {
    name: "南",
    enName: "S",
    value: [168.75, 191.25],
  },
  {
    name: "南西南",
    enName: "SSW",
    value: [191.25, 213.75],
  },
  {
    name: "西南",
    enName: "SW",
    value: [213.75, 236.25],
  },
  {
    name: "西西南",
    enName: "WSW",
    value: [236.25, 258.75],
  },
  {
    name: "西",
    enName: "W",
    value: [258.75, 281.25],
  },
  {
    name: "西西北",
    enName: "WNW",
    value: [281.25, 303.75],
  },
  {
    name: "西北",
    enName: "NW",
    value: [303.75, 326.25],
  },
  {
    name: "北西北",
    enName: "NNW",
    value: [326.25, 348.75],
  },
];
// 根据系统返回值进行适配 不能参考正常的方位图了·······
const angleMapWind = [
  {
    name: "北东北",
    enName: "NNE",
    value: [11.25, 33.75],
  },
  {
    name: "东北",
    enName: "NE",
    value: [33.75, 56.25],
  },
  {
    name: "东东北",
    enName: "ENE",
    value: [56.25, 78.75],
  },
  {
    name: "东",
    enName: "E",
    value: [78.75, 101.25],
  },
  {
    name: "东东南",
    enName: "ESE",
    value: [101.25, 123.75],
  },
  {
    name: "东南",
    enName: "SE",
    value: [123.75, 146.25],
  },
  {
    name: "南东南",
    enName: "SSE",
    value: [146.25, 168.75],
  },
  {
    name: "南",
    enName: "S",
    value: [168.75, 191.25],
  },
  {
    name: "南西南",
    enName: "SSW",
    value: [191.25, 213.75],
  },
  {
    name: "西南",
    enName: "SW",
    value: [213.75, 236.25],
  },
  {
    name: "西西南",
    enName: "WSW",
    value: [236.25, 258.75],
  },
  {
    name: "西",
    enName: "W",
    value: [258.75, 281.25],
  },
  {
    name: "西西北",
    enName: "WNW",
    value: [281.25, 303.75],
  },
  {
    name: "西北",
    enName: "NW",
    value: [303.75, 326.25],
  },
  {
    name: "北西北",
    enName: "NNW",
    value: [326.25, 348.75],
  },
  {
    name: "北",
    enName: "NNW",
    value: [348.75, 360],
  },
  {
    name: "北",
    enName: "NNW",
    value: [0, 11.25],
  },
];
const getAngle = (angle, type) => {
  let value = angle.split(" ")[0];

  // let value = angle.split(' ')[0]
  if (type == "海浪") {
    let value1 =
      360 - (parseFloat(angle) + 90) > 0
        ? (360 - (parseFloat(angle) + 90)) % 360
        : 360 - (parseFloat(value) + 90) + 360;
    value = value1.toFixed(2);
  }
  let angleName = "";
  if (type == "海风正" || type == "海风") {
    angleMapWind.forEach((item) => {
      if (value >= item.value[0] && value < item.value[1]) {
        angleName = item.name;
      }
      // if (angleName == "") {
      //     angleName = "南";
      // }
    });
  } else {
    angleMap.forEach((item) => {
      if (value >= item.value[0] && value < item.value[1]) {
        angleName = item.name;
      }
    });
  }

  if (angleName == "") {
    angleName = "北";
  }
  return angleName;
};

// let shumoT = '';
const getLayerObj = (shumoT, params, pngName) => {

  let ncDirectory = "dalian";
  return {
    wind: {
      // url: `${url_go}${ncDirectory}/wind/${shumoT}/${params.pngName}`,
      url: `http://59.110.0.27:1102/public/img/dalian/${shumoT}/wind.png`,
      range: {
        ...params
      },
    },
    wave: {
      // url: `${url_go}${ncDirectory}/wave/${shumoT}/${params.pngName}`,
      // url: `http://59.110.0.27:1102/public/img/dalian/wave/2025041200/wave.png`,
      url: `http://59.110.0.27:1102/public/img/dalian/${shumoT}/wave.png`,
      range: {
        ...params
      },
    },
    cuerent: {
      // url: `${url_go}${ncDirectory}/current/${shumoT}/${params.pngName}`,
      url: `http://59.110.0.27:1102/public/img/dalian/${shumoT}/current.png`,
      range: {
        ...params
      },
    },

    surge: {
      // url: `${url_go}${ncDirectory}/current/${shumoT}/${params.pngName}`,
      url: `http://59.110.0.27:1102/public/img/dalian/${shumoT}/surge.png`,

      range: {
        ...params
      },
    },
    seatemp: {
      // url: `${url_go}${ncDirectory}/current/${shumoT}/${params.pngName}`,
      url: `http://59.110.0.27:1102/public/img/dalian/${shumoT}/seatemp.png`,

      range: {
        ...params
      },
    },
    temp: {
      // url: `${url_go}${ncDirectory}/current/${shumoT}/${params.pngName}`,
      url: `http://59.110.0.27:1102/public/img/dalian/${shumoT}/temp.png`,
      range: {
        ...params
      },
    },
  };
};

let lastShumo = "";
let smDate = ref("");

let timerSm = null;

watch(
  [timeHour, activeShumo, activeLi],
  () => {
    // console.log(timeHour.value, activeShumo.value, activeLi.value);

    if (timerSm) {
      clearTimeout(timerSm);
    }
    let t = formatTime(addHours(`${date.value} 08:00`, timeHour.value)).split(
      ":"
    )[0];
    // let t = formatTime(addHours(`${date.value} 00:00`, timeHour.value)).split(
    //   ":"
    // )[0];

    let pianyiT = formatTime(
      addHours(`${date.value} 08:00`, timeHour.value)
    ).split(":")[0];
    let smArr = t.split(" ");
    smDate.value =
      smArr[0].split("-")[1] +
      "月" +
      smArr[0].split("-")[2] +
      "日" +
      smArr[1] +
      "时";

    timerSm = setTimeout(() => {
      activeLi.value = tempLi;
      lizis.value.forEach((item) => {
        if (tempLi.includes(item.title)) {
          item.isShow = true;
        }
      });
      // isPop.value = false
      let isLizi = activeLi.value.includes("粒子法");
      let isShuzhi = activeLi.value.includes("数值法");
      let isJiantou = activeLi.value.includes("箭头法");

      t = pianyiT.replace(/-| /g, "");



      // t = '2024071100'
      if (activeShumo.value == "") {
        // 关闭所有activeLi
        activeLi.value = [];
        for (let i = 0; i < lizis.value.length; i++) {
          lizis.value[i].isShow = false;
        }

        return;
      }
      let path = "";
      if (activeShumo.value == "海风") {
        path = `/wind/${t}/Wind_wq_sugon_wrf.png`;
      } else if (activeShumo.value == "海浪") {
        path = `/wave/${t}/Wave_cjk_swan.png`;
      } else if (activeShumo.value == "海流") {
        path = `/current/${t}/Current_cjk.png`;
      }
      // determinePngExist(token, path).then((res) => {
      //   if (res.data.data == "true" || true) {
      if (lastShumo != activeShumo.value) {
        removeForecastLayer();
      }
      lastShumo = activeShumo.value;
      if (activeShumo.value == "海风") {
        let windData = {
          label: "10米风",
          common: getLayerObj(t, smRange['wind']).wind,
          attribute: {
            png: "wind_G_full.png",
            type: "wind_speed",
            calRegion: false,
            showLand: true,
            showLabel: isShuzhi,
          },
        };
        // 计时
        // let t1 = new Date().getTime();
        addForecastLayer(windData);
        // console.log('添加图层耗时：', new Date().getTime() - t1);
        removeForecastLayerL();
        if (isLizi || isJiantou) {
          if (isLizi) {
            let windData = {
              label: "10米风",
              common: getLayerObj(t, smRange['wind']).wind,
              attribute: {
                png: "wind_G_full.png",
                type: "wind",
                calRegion: false,
                showLand: true,
                showParticle: true,
              },
            };
            // console.log(windData, "windData");

            addForecastLayer(windData);
          }
          if (isJiantou) {
            let windData = {
              label: "10米风",
              common: getLayerObj(t, smRange['wind']).wind,
              attribute: {
                png: "wind_G_full.png",
                type: "wind",
                calRegion: false,
                showLand: true,
                showArrow: false,
                showFeather: isJiantou,
              },
            };

            addForecastLayer(windData);
          }
        }
      }

      if (activeShumo.value == "海浪") {
        let waveData = {
          label: "海浪",
          common: getLayerObj(t, smRange['wave']).wave,
          attribute: {
            png: "wave_G_full.png",
            type: "wave_height",
            calRegion: false,
            showLand: false,
            showLabel: isShuzhi,
          },
        };
        addForecastLayer(waveData);
        removeForecastLayerL();
        if (isLizi || isJiantou) {
          if (isLizi) {
            let waveData = {
              label: "海浪",
              common: getLayerObj(t, smRange['wave']).wave,
              attribute: {
                // png: "wave_G_full.png",
                type: "wave",
                calRegion: false,
                showLand: true,
                showParticle: true,
              },
            };
            addForecastLayer(waveData);
          }
          if (isJiantou) {
            let waveData = {
              label: "海浪",
              common: getLayerObj(t, smRange['wave']).wave,
              attribute: {
                png: "wave_G_full.png",
                type: "wave",
                calRegion: false,
                showLand: true,
                // showArrow: isJiantou,
                showArrow: false,
                showFeather: isJiantou,
              },
            };
            addForecastLayer(waveData);
          }
        }
      }

      if (activeShumo.value == "海流") {
        let currentData = {
          label: "洋流",
          common: getLayerObj(t, smRange['current']).cuerent,
          attribute: {
            png: "current_hl_full.png",
            type: "current_speed",
            calRegion: false,
            showLand: false,
            showLabel: isShuzhi,
          },
        };
        addForecastLayer(currentData);
        removeForecastLayerL();
        if (isLizi || isJiantou) {
          if (isLizi) {
            let windData = {
              label: "10米风",
              common: getLayerObj(t, smRange['current']).cuerent,
              attribute: {
                png: "current_hl_full.png",
                type: "current",
                calRegion: false,
                showLand: true,
                showParticle: true,
              },
            };
            addForecastLayer(windData);
          }
          if (isJiantou) {
            let windData = {
              label: "10米风",
              common: getLayerObj(t, smRange['current']).cuerent,
              attribute: {
                png: "current_hl_full.png",
                type: "current",
                calRegion: false,
                showLand: true,
                showArrow: isJiantou,
                // showArrow: false,
                // showFeather: isJiantou,
              },
            };
            addForecastLayer(windData);
          }
        }
      }

      if (activeShumo.value == "增水") {
        let surgeData = {
          label: "增水",
          common: getLayerObj(t, smRange['surge']).surge,
          attribute: {
            png: "wave_G_full.png",
            type: "wave_height",
            calRegion: false,
            showLand: false,
            showLabel: isShuzhi,
          },
        };
        addForecastLayer(surgeData);
        removeForecastLayerL();
      }

      if (activeShumo.value == "气温") {
        let tempData = {
          label: "气温",
          common: getLayerObj(t, smRange['temp']).temp,
          attribute: {
            png: "wave_G_full.png",
            type: "temp",
            calRegion: false,
            showLand: true,
            showLabel: isShuzhi,
          },
        };
        addForecastLayer(tempData);
        removeForecastLayerL();
      }

      if (activeShumo.value == "海温") {
        let seatempData = {
          label: "海温",
          common: getLayerObj(t, smRange['seatemp']).seatemp,
          attribute: {
            png: "wave_G_full.png",
            type: "seatemp",
            calRegion: false,
            showLand: false,
            showLabel: isShuzhi,
          },
        };
        addForecastLayer(seatempData);
        removeForecastLayerL();
      }

      // 显示图例
      let legendArr = [];
      if (activeShumo.value == "海风") {
        if (!boundaryLineLayer1) {
          // 加载海风时的边界线
          boundaryLineLayer1 = L.tileLayer.wms(
            "https://geomap.oceanread.com:5812/geoserver/world_boundary/wms?",
            {
              layers: "world_boundary:world_vector_forWMP1",
              format: "image/png",
              transparent: true,
              pane: "overlayPane",
              zIndex: Config.layerIndex.boundaryLine,
            }
          );
          boundaryLineLayer1.addTo(Config.mapObj.map);
        }

        // 定制图例
        // legendArr.push({
        //     value: '风速',
        //     color: "rgb(255,255,255)",
        //     fontcolor: "#000"
        // })

        legendArr.push({
          value: "m/s",
          color: Config.scalarColor.wind_speed[0].color,
          // fontcolor: "#000"
        });

        let length =
          Config.scalarColor.wind_speed.length > 20
            ? 19
            : Config.scalarColor.wind_speed.length;
        for (let i = 0; i < length; i = i + 2) {
          const ele = Config.scalarColor.wind_speed[i];
          legendArr.push(ele);
        }

        legendArrData.value = legendArr;
      }
      if (activeShumo.value == "海浪") {
        legendArr.push({
          value: "m",
          color: Config.scalarColor.wave[0].color,
          // fontcolor: "#000"
        });
        // legendArr.push({
        //     value: '浪高',
        //     color: "rgb(255,255,255)",
        //     fontcolor: "#000"
        // })
        // let length = Config.scalarColor.wave_height.length > 14 ? 13 : Config.scalarColor.wave_height.length
        // for (let i = 1; i < length; i++) {
        //     const element = Config.scalarColor.wave_height[i];
        //     legendArr.push(
        //         element
        //     )
        // }
        let length =
          Config.scalarColor.wave.length > 16
            ? 15
            : Config.scalarColor.wave.length;
        for (let i = 1; i < length; i = i + 2) {
          const element = Config.scalarColor.wave[i];
          legendArr.push(element);
        }

        legendArrData.value = legendArr;
      }
      if (activeShumo.value == "海流") {
        // legendArr.push({
        //     value: '流速',
        //     color: "rgb(255,255,255)",
        //     fontcolor: "#000"
        // })
        legendArr.push({
          value: "m/s",
          color: Config.scalarColor.current_speed[0].color,
          // fontcolor: "#000",
          // width: 50,
        });

        let length =
          Config.scalarColor.current_speed.length > 15
            ? 14
            : Config.scalarColor.current_speed.length;
        for (let i = 0; i < length; i = i + 2) {
          const element = Config.scalarColor.current_speed[i];
          legendArr.push(element);
        }

        legendArrData.value = legendArr;
      }

      if (activeShumo.value == "增水") {
        legendArr.push({
          value: "cm",
          color: Config.scalarColor.surge[0].color,
        });

        let length =
          Config.scalarColor.surge.length > 15
            ? 14
            : Config.scalarColor.surge.length;
        for (let i = 0; i < length; i = i + 2) {
          const element = Config.scalarColor.surge[i];
          legendArr.push(element);
        }

        legendArrData.value = legendArr;
      }

      if (activeShumo.value == "海温") {
        legendArr.push({
          value: "℃",
          color: Config.scalarColor.seatemp[0].color,
        });

        let length =
          Config.scalarColor.seatemp.length > 15
            ? 14
            : Config.scalarColor.seatemp.length;
        for (let i = 0; i < length; i = i + 2) {
          const element = Config.scalarColor.seatemp[i];
          legendArr.push(element);
        }

        legendArrData.value = legendArr;
      }

      if (activeShumo.value == "气温") {
        legendArr.push({
          value: "℃",
          color: Config.scalarColor.temp[0].color,
        });

        let length =
          Config.scalarColor.temp.length > 15
            ? 14
            : Config.scalarColor.temp.length;
        for (let i = 0; i < length; i = i + 2) {
          const element = Config.scalarColor.temp[i];
          legendArr.push(element);
        }

        legendArrData.value = legendArr;
      }

      // if (activeShumo.value == "气温") {
      //   legendArr.push({
      //     value: "℃",
      //     color: Config.scalarColor.surge[0].color,
      //   });

      //   let length =
      //     Config.scalarColor.surge.length > 15
      //       ? 14
      //       : Config.scalarColor.surge.length;
      //   for (let i = 0; i < length; i = i + 2) {
      //     const element = Config.scalarColor.surge[i];
      //     legendArr.push(element);
      //   }

      //   legendArrData.value = legendArr;
      // }
      isShowLegend.value = true;
      //   } 
      // });
    }, 200);
  },
  {
    deep: true,
  }
);


const popInfo3 = reactive({
  position: "",
  waveHeight: "2.7",
  waveDirection: "东北",
  windSpeed: "4.1",
  windDirection: "北东北",
  currentSpeed: "2.4",
  currentDirection: "西南",
  temp: "22.5",
  seatemp: "22.5",
  surge: "0.5",
  name: "",
  time: "",
});

const popInfo = reactive({
  position: "",
  time: "",
  value: "",
  angle: "",
  label: ["", ""],
  name: "",
});
const isPop = ref(false);
const style = reactive({
  left: "20px",
  top: "20px",
});

let popLatLng = {
  lat: 0,
  lng: 0,
};

const computeWindUV = (u_value, v_value) => {
  let value = Math.sqrt(u_value * u_value + v_value * v_value);
  let angle = Math.acos(u_value / value);
  if (v_value < 0) {
    angle = -angle;
  }
  angle = Math.round((angle / Math.PI) * 180.0 + 90);
  if (angle < 0) {
    angle = angle + 360;
  }
  angle = Math.round(360 - angle);
  value = value.toFixed(1);
  return {
    value: parseFloat(value),
    angle: angle,
  };
};
// 地图上的点击弹窗
const handleMapSz = async (e, name) => {
  if (
    activeNv.value != "数值预报" ||
    activeShumo.value == "" ||
    isShowChart.value
  ) {
    return;
  }

  if (thisLayerG.getLayers().length == 0) {
    ElMessage({
      message: "当前日期暂无数据",
      type: "warning",
    });
    return;
  }

  popInfo.name = "";
  let { grid_data, options } = thisLayerG.getLayers()[0];
  let { x, y } = e;

  let layerName = shumoInfo.value.find(
    (item) => item.title == activeShumo.value
  ).layer;
  // 转为经纬度
  let latlng = Config.mapObj.map.containerPointToLatLng([x, y]);
  let { startLat, startLon, scale } = options.range;

  let row = Math.floor((startLat - latlng.lat) / scale);
  let col = Math.floor((latlng.lng - startLon) / scale);

  // popInfo3.time = smDate.value;
  // popInfo.position = `${latlng.lat.toFixed(3)}N, ${latlng.lng.toFixed(3)}E`;
  // nextTick(() => {
  //     let popMain = document.getElementById("pop_main");
  //     let popMainWidth = popMain.offsetWidth;
  //     let popMainHeight = popMain.offsetHeight;
  //     style.left = x - popMainWidth / 2 + "px";
  //     style.top = y - popMainHeight - 10 + "px";
  //   });
  //   style.left = x - 105 + "px";
  //   style.top = y - 102 + "px";
  // return
  // let info = pointInfo[row][col]
  let t = formatTime(addHours(`${date.value} 08:00`, timeHour.value));
  let t1 = formatTime(addHours(`${date.value} 08:00`, timeHour.value));

  // 2025-05-21 11:00 变为2025052111
  t = t.replace(/-| /g, "");
  t1 = t1.replace(/-| /g, "");
  // t = t.replace(/-| /g, '')
  t = t.replace(/:/g, "");
  t1 = t1.replace(/:/g, "");

  // 保留到小时
  t = t.substring(0, 10);
  t1 = t1.substring(0, 10);


  let typeArr = ["wave", "wind", "current", "temp", "seatemp", "surge"];
  // console.log("latlng", latlng, "t", t, "t1", t1, "featureType", typeArr, date.value, timeHour.value);

  let allP = [];
  typeArr.forEach((sType) => {
    // allP.push(seriesQueriesNew(token, {
    //   ...smRange[sType],
    //   startDateTime: t,
    //   endDateTime: t1,
    //   featureType: sType,
    //   latitude: latlng.lat,
    //   longitude: latlng.lng,
    // }))
    allP.push(
      getSequence({
        feature: sType,
        longitude: latlng.lng,
        latitude: latlng.lat,
        beginTime: t,
        endTime: t1,
      })
    );
  });

  Promise.all(allP).then((resArr) => {
    // console.log("resArr", resArr);
    typeArr.forEach((sType, index) => {
      if (sType == 'wind') {
        let value = computeWindUV(
          resArr[index]?.data[0]?.value1,
          resArr[index]?.data[0]?.value2
        );
        popInfo3.windSpeed = value.value;
        popInfo3.windDirection = value.angle + " °";
      } else if (sType == 'wave') {
        popInfo3.waveHeight = Number(resArr[index]?.data[0]?.value1).toFixed(1);
        popInfo3.waveDirection = resArr[index]?.data[0]?.value2 + " °";
        // popInfo3.waveDirection = getAngle(resArr[index]?.data[0]?.value2, activeShumo.value);
      } else if (sType == 'current') {
        let value = computeWindUV(
          resArr[index]?.data[0]?.value1,
          resArr[index]?.data[0]?.value2
        );
        popInfo3.currentSpeed = value.value;
        popInfo3.currentDirection = value.angle + " °";
      } else if (sType == 'temp') {
        popInfo3.temp = (Number(resArr[index]?.data[0]?.value1)).toFixed(1);
      } else if (sType == 'seatemp') {
        popInfo3.seatemp = (Number(resArr[index]?.data[0]?.value1)).toFixed(1);
      } else if (sType == 'surge') {
        popInfo3.surge = Number(resArr[index]?.data[0]?.value1).toFixed(1);
      }
    })

  })

  // Promise.all(allP).then((res) => {
  // popInfo3.windSpeed = res[1]?.data?.data?.windDatas[0][0];
  // popInfo3.windDirection = res[1]?.data?.data?.windDatas[0][1] + " °";
  popInfo.position = `${latlng.lat.toFixed(3)}N, ${latlng.lng.toFixed(3)}E`;
  popInfo3.time = smDate.value;


  if (name) {
    popInfo.name = name;
  }
  isPop.value = true;
  nextTick(() => {
    let popMain = document.getElementById("pop_main");
    let popMainWidth = popMain.offsetWidth;
    let popMainHeight = popMain.offsetHeight;
    style.left = x - popMainWidth / 2 + "px";
    style.top = y - popMainHeight - 10 + "px";
  });
  // });

  return;

  if (!info || info == -999 || (info.value == 0 && info.angle == 0)) {
    // 提示无数据
    ElMessage({
      message: "当前位置暂无数据",
      type: "warning",
    });
    return;
  }
  let unit = "m/s";
  if (layerName == "waveLayer") {
    unit = "m";
  }

  popInfo.value = `${info.value} ${unit}`;
  popInfo.angle = `${info.angle} °`;
  popInfo.position = `${latlng.lat.toFixed(3)}N, ${latlng.lng.toFixed(3)}E`;
  if (name) {
    popInfo.name = name;
  }
  if (layerName == "windLayer") {
    popInfo.label = ["风速", "风向"];
  } else if (layerName == "waveLayer") {
    popInfo.label = ["浪高", "浪向"];
  } else {
    popInfo.label = ["流速", "流向"];
  }

  style.left = x - 105 + "px";
  style.top = y - 102 + "px";
};

const handlePopClose = () => {
  isPop.value = false;
};

const activeTypeMap = {
  海风: "windDatas",
  海浪: "waveDatas",
  海流: "currentDatas",
};

const handleActiveType = (item) => {
  activeType.value = item;
  initSmChart();
};

const handleChart = () => {
  isShowChart.value = true;
  activeType.value = activeShumo.value;
  initSmChart();
};



const initSmChart = () => {
  // 清空数据
  weatherData.value = {
    wind: [],
    wave: [],
    current: [],
    temp: [],
    seatemp: [],
    surge: []
  };
  let typeArr = ["wave", "wind", "current", "temp", "seatemp", "surge"];
  let allP = [];
  let lat = popInfo.position.split(",")[0].slice(0, -1);
  let lon = popInfo.position.split(",")[1].slice(0, -1);
  let t = formatTime(addHours(`${date.value} 08:00`, timeHour.value));
  let t1 = formatTime(addHours(`${date.value} 08:00`, timeHour.value + 47));
  t = t.replace(/-| /g, "");
  t1 = t1.replace(/-| /g, "");
  t = t.replace(/:/g, "");
  t1 = t1.replace(/:/g, "");
  t = t.substring(0, 10);
  t1 = t1.substring(0, 10);

  typeArr.forEach((sType) => {
    allP.push(
      getSequence({
        feature: sType,
        longitude: lon,
        latitude: lat,
        beginTime: t,
        endTime: t1,
      })
    );
  })

  Promise.all(allP).then((resArr) => {
    // console.log(resArr);
    typeArr.forEach((sType, index) => {
      if (sType == 'wind') {
        resArr[index]?.data.forEach(item => {
          let value = computeWindUV(
            item.value1,
            item.value2
          );
          weatherData.value.wind.push({
            speed: value.value.toFixed(1),
            direction: value.angle
          })
        })
      } else if (sType == 'wave') {
        resArr[index]?.data.forEach(item => {
          weatherData.value.wave.push({
            height: Number(item.value1).toFixed(1),
            direction: item.value2
          })
        })
      } else if (sType == 'current') {
        resArr[index]?.data.forEach(item => {
          let value = computeWindUV(
            item.value1,
            item.value2
          );
          weatherData.value.current.push({
            speed: value.value.toFixed(1),
            direction: value.angle
          })
        })
      } else if (sType == 'temp') {
        resArr[index]?.data.forEach(item => {
          weatherData.value.temp.push((Number(resArr[index]?.data[0]?.value1)).toFixed(1))
        })
      } else if (sType == 'seatemp') {
        resArr[index]?.data.forEach(item => {
          weatherData.value.seatemp.push((Number(resArr[index]?.data[0]?.value1)).toFixed(1))
        })
      }
    })

  })
  return
  let featureType = shumoInfo.value.find(
    (item) => item.title == activeType.value
  ).type;
  // let lat = popInfo.position.split(",")[0].slice(0, -1);
  // let lon = popInfo.position.split(",")[1].slice(0, -1);
  let startDateTime = day3.startDateTime;
  let endDateTime = day3.endDateTime;
  // let t1 = formatTime(addHours(day3.startDateTime, -8));
  // let t2 = formatTime(addHours(day3.endDateTime, -8));
  seriesQueriesNew(token, {
    ...smRange[featureType],
    startDateTime: t1,
    endDateTime: t2,
    featureType: featureType,
    latitude: lat,
    longitude: lon,
  })
    // seriesQueries(token, featureType, t1, t2, lat, lon, bm.value)
    .then((res) => {
      let dataCopy = res.data.data[activeTypeMap[activeType.value]];
      // 去除dataCopy中的null
      dataCopy = dataCopy.filter((item) => item != null);
      if (dataCopy.length == 0) {
        ElMessage({
          message: "当前位置暂无数据",
          type: "warning",
        });
        return;
      }

      let dateStart = startDateTime;
      let data = dataCopy.map((item, idx) => {
        let dateNow = formatTime(addHours(new Date(dateStart), idx));
        return {
          time: dateNow,
          height: item[0],
          angle: item[1],
        };
      });
      if (isShowChart.value) {
        nextTick(() => {
          let myChart = echarts.init(document.getElementById("chart_main"));
          let option = {
            xAxis: {
              type: "category",
              data: data.map((item) => item.time),
              // 显示小时，只在跨越天数的时候显示日期
              axisLabel: {
                formatter: (value, index) => {
                  return value.split(" ")[1];
                },
              },
            },
            yAxis: {
              type: "value",
              name: featureType == "wave" ? "m" : "m/s",
            },
            grid: {
              left: "10%",
              right: "10%",
              top: "10%",
              bottom: "10%",
            },
            dataZoom: [
              {
                type: "slider",
                show: true,
                xAxisIndex: [0],
                start: 0,
                end: 33,
                bottom: 10,
                height: 20,
                showDetail: false,
                showDataShadow: false,
                fillerColor: "rgba(167,183,204,0.4)",
                borderColor: "rgba(167,183,204,0.4)",
                backgroundColor: "rgba(167,183,204,0.4)",
                handleStyle: {
                  color: "rgba(167,183,204,0.4)",
                  borderColor: "rgba(167,183,204,0.4)",
                },
                textStyle: {
                  color: "rgba(167,183,204,0.4)",
                },
              },
              {
                type: "inside",
                xAxisIndex: [0],
                start: 0,
                end: 100,
                zoomLock: true,
              },
            ],
            tooltip: {
              trigger: "axis",
              formatter: (params) => {
                let str = formatTime(params[0].name);
                let arr = str.split(" ")[0].split("-");
                let hour = str.split(" ")[1].split(":")[0];
                // let angle = activeType.value == '海流' ? data[params[0].dataIndex].angle : (360 - data[params[0].dataIndex].angle)
                let angle = data[params[0].dataIndex].angle;
                // if (activeType.value == '海风') {
                //     angle = (360 - data[params[0].dataIndex].angle)
                // }

                // let angle = data[params[0].dataIndex].angle
                return (
                  ` ${arr[0]}年${arr[1]}月${arr[2]}日 ${hour}时` +
                  "<br />" +
                  `${params[0].marker}` +
                  params[0].value +
                  (activeType.value == "海浪" ? "m" : "m/s") +
                  `&nbsp;&nbsp;&nbsp;${params[0].marker}&nbsp;` +
                  getAngle(angle + " ", activeType.value) +
                  ""
                );
              },
            },
            series: [
              {
                data: data.map((item) => item.height),
                type: "line",
                showSymbol: true,
                smooth: true,
                showAllSymbol: true,
                // label: {
                //     show: true,
                //     position: 'top'
                // },
                // #F8AB5F 100%到0%透明度

                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#B8E986",
                    },
                    {
                      offset: 1,
                      color: "#B8E98600",
                    },
                  ]),
                },
                // 线的颜色
                lineStyle: {
                  color: "#B8E986",
                },
                // // 点的颜色
                itemStyle: {
                  label: {
                    show: true,
                  },
                },
                // 点样式为箭头 方向根据角度
                symbol: `image://${lineCircle}`,
                symbolSize: 20,
                symbolOffset: [0, 0],
                symbolRotate: (_, all) => {
                  // return activeType.value == '海流1' ? data[all.dataIndex].angle : (360 - data[all.dataIndex].angle)
                  if (activeType.value == "海流") {
                    // if ( data[all.dataIndex].angle<=180) {
                    //     return  180- data[all.dataIndex].angle
                    // }else{
                    //     return   (540- data[all.dataIndex].angle )
                    // }
                    return 360 - data[all.dataIndex].angle;
                  }
                  if (activeType.value == "海浪") {
                    // if (data[all.dataIndex].angle <= 180) {
                    //     return 180 - data[all.dataIndex].angle;
                    // } else {
                    //     return 540 - data[all.dataIndex].angle;
                    // }
                    return data[all.dataIndex].angle - 90;
                  }
                  if (activeType.value == "海风") {
                    // if (data[all.dataIndex].angle <= 180) {
                    //     return 180 - data[all.dataIndex].angle;
                    // } else {
                    //     return 540 - data[all.dataIndex].angle;
                    // }
                    // return data[all.dataIndex].angle;
                    return -data[all.dataIndex].angle + 180;
                  }
                  return data[all.dataIndex].angle; //activeType.value == '海流1' ? data[all.dataIndex].angle : (360 - data[all.dataIndex].angle)
                },
              },
            ],
          };
          myChart.setOption(option);
        });
      }
    });
};

const showChart = (data) => { };

const handleSzChartClose = () => {
  isShowChart.value = false;
};

const isBofang = ref(false);

// 定义一个定时任务timeHour++
const timer = ref(null);

const handleBofang = () => {
  isBofang.value = !isBofang.value;
  if (isBofang.value) {
    timer.value = setInterval(() => {
      timeHour.value += 1;
      if (timeHour.value == 72) {
        // clearInterval(timer.value)
        // isBofang.value = false

        // 重置
        timeHour.value = 0;
      }
    }, 1500);
  } else {
    clearInterval(timer.value);
  }
};

// 灾害警报
const activeTab = ref("海浪警报");
const alarmYear = ref();

const hisAlarms = reactive({
  海浪警报: [
    {
      date: "2023-06-11 10:28",
      value: "海浪蓝色警报",
    },
    {
      date: "2023-06-11 10:28",
      value: "海浪黄色警报",
    },
    {
      date: "2023-06-11 10:28",
      value: "海浪橙色警报",
    },
  ],
  风暴潮警报: [
    {
      date: "2023-06-11 10:28",
      value: "风暴潮蓝色警报",
    },
    {
      date: "2023-06-11 10:28",
      value: "风暴潮黄色警报",
    },
    {
      date: "2023-06-11 10:28",
      value: "风暴潮红色警报",
    },
  ],
});

let currentAlarm = ref([]);
let homeAlarm = ref([]);
const getAlarmData = () => {
  currentAlarm.value = [];
  let type = activeTab.value == "海浪警报" ? "wave" : "storm";
  getDisaster(token, type, bm.value).then((res) => {

    currentAlarm.value = res.data.data?.map((item) => {
      return {
        date: formatTime(item.publishDate),
        value:
          (activeTab.value == "海浪警报" ? "海浪" : "风暴潮") + item.warnName,
        url: item.warnUrl,
      };
    });
  });


};
const getHomeAlarm = () => {
  homeAlarm.value = [];
  let types = ["wave", "storm"];
  types.forEach((type) => {
    getDisaster(token, type).then((res) => {
      // res.data根据publishDate排序，取最新的一个
      let dd = res.data?.data?.sort((a, b) => {
        return new Date(b.publishDate) - new Date(a.publishDate);
      });

      if (res.data.code != 500) {
        if (dd.length > 0) {
          homeAlarm.value.push({
            date: formatTime(dd[0].publishDate),
            value: (type == "wave" ? "海浪" : "风暴潮") + dd[0].warnName,
            url: dd[0].warnUrl,
          });
        }
      }
    });
  });
};

const handleGoAlarm = (value) => {
  activeNv.value = "灾害警报";
  activeTab.value = value.includes("海浪") ? "海浪警报" : "风暴潮警报";
};

const getAlarmColor = (value) => {
  // 暂时感觉没颜色好看
  return ''
  if (value.includes("蓝色")) {
    return "#4A90E2";
  } else if (value.includes("黄色")) {
    return "#d7d707ee";
  } else if (value.includes("橙色")) {
    return "#F5A623";
  } else if (value.includes("红色")) {
    return "#D0021B";
  } else if (value.includes("消息")) {
    return "#9B9B9B";
  } else {
    return "#7ED321";
  }
};

const getAlarmImg = (value) => {
  if (value.includes("海浪")) {
    if (value.includes("蓝色")) {
      return iconWaveLan;
    } else if (value.includes("黄色")) {
      return iconWaveHuang;
    } else if (value.includes("橙色")) {
      return iconWaveCheng;
    } else if (value.includes("红色")) {
      return iconWaveHong;
    } else {
      return iconWaveInfo;
    }
  } else {
    if (value.includes("蓝色")) {
      return iconStormLan;
    } else if (value.includes("黄色")) {
      return iconStormHuang;
    } else if (value.includes("橙色")) {
      return iconStormCheng;
    } else if (value.includes("红色")) {
      return iconStormHong;
    } else {
      return iconStormInfo;
    }
  }
};

const currentTfPop = ref("");

const handleLook = (url) => {
  console.log(url);
  lookPdf(url.id).then((res) => {
    pdfDialog.value = true;
    urlObj = res.data;
  });

  // lookAlarm(url.split(".")[0] + ".pdf").then((res) => {
  //   pdfDialog.value = true;
  //   urlObj = res.data;
  // });
};


watch(
  [alarmYear, activeTab],
  () => {
  },
  {
    immediate: true,
  }
);

let popMarker = null;
var pulsingIcon = L.icon.pulse({ iconSize: [8, 8], color: "red" });
watch(isPop, () => {
  // 开启监听地图的移动，窗口跟着移动
  if (isPop.value) {
    Config.mapObj.map.on("move", () => {
      let { x, y } = Config.mapObj.map.latLngToContainerPoint([
        popInfo.position.split(",")[0].slice(0, -1),
        popInfo.position.split(",")[1].slice(0, -1),
      ]);
      let popMain = document.getElementById("pop_main");
      let popMainWidth = popMain.offsetWidth;
      let popMainHeight = popMain.offsetHeight;
      style.left = x - popMainWidth / 2 + "px";
      style.top = y - popMainHeight - 10 + "px";
      // style.left = (x - 105) + 'px'
      // style.top = (y - 102) + 'px'
    });
  } else {
    Config.mapObj.map.off("move");
    if (popMarker) {
      Config.mapObj.map.removeLayer(popMarker);
    }
  }
});

watch(popInfo, () => {
  if (popMarker) {
    Config.mapObj.map.removeLayer(popMarker);
  }
  if (popInfo.name == "") {
    let p = popInfo.position.split(",");
    let lat = p[0].slice(0, -1);
    let lon = p[1].slice(0, -1);
    popMarker = L.marker([lat, lon], { icon: pulsingIcon }).addTo(
      Config.mapObj.map
    );
  }
});
// 拖拽部分
const pop_ref = ref(null);


let qs1 = null,
  qs2 = null,
  qs3 = null;
let qsTxt1 = null,
  qsTxt2 = null,
  qsTxt3 = null;
let qsjq = [
  {
    name: "1厂",
    marker: null,
    text: null,
    position: [30.469, 120.991],
  },
  {
    name: "3号",
    marker: null,
    text: null,
    position: [30.431, 120.997],
  },
  {
    name: "2厂",
    marker: null,
    text: null,
    position: [30.385, 120.966],
  },
];
const add123 = (nv) => {
  if (nv == "数值预报") {
    //  
    qsjq.forEach((item) => {
      let icon = L.icon({
        iconUrl: "./img/location.png",
        iconSize: [22, 22],
        className: "qinshan-icon",
      });
      item.marker = L.marker(item.position, { icon: icon }).addTo(
        Config.mapObj.map
      );
      let text = L.divIcon({
        className: "qinshan-text",
        html: item.name,
        iconAnchor: [-10, 8],
      });

      // item.marker.on("click", (e) => click123(e, item.name));
      item.text = L.marker(item.position, { icon: text }).addTo(
        Config.mapObj.map
      );
    });
    // 注册一个点击事件
    let arr123 = document.getElementsByClassName("qinshan-icon");
    for (let i = 0; i < arr123.length; i++) {
      arr123[i].addEventListener("click", (e) => {
        click123(e, qsjq[i]);
        // 阻止冒泡
        e.stopPropagation();
      });
    }
  } else {
    //  
    qsjq.forEach((item) => {
      if (!item.marker) return;
      Config.mapObj.map?.removeLayer(item.marker);
      Config.mapObj.map?.removeLayer(item.text);
    });
  }
};

const click123 = (e, point) => {
  // console.log(point);

  let pointPosition = Config.mapObj.map.latLngToContainerPoint(point.position);
  handleMapSz(
    {
      x: pointPosition.x,
      y: pointPosition.y,
    },
    point.name
  );
};


watch(activeNv, () => {
  if (activeNv.value == "综合预报") {
    activeHight.value = 350;
    activeHightBq.value = 350;
  } else if (activeNv.value == "数值预报") {
    activeHight.value = isShowChart.value ? 300 : 100;
    activeHightBq.value = 50;
    if (activeShumo.value == "") {
      activeShumo.value = "海浪";
    }
  } else if (activeNv.value == "潮位预报") {
    activeHight.value = 300;
    activeHightBq.value = 300;
  } else if (activeNv.value == "台风路径") {
    activeHight.value = 300;
    activeHightBq.value = 10;
  } else {
    activeHight.value = 100;
    activeHightBq.value = 100;
  }
  // add123(activeNv.value);
  if (activeNv.value != "数值预报") {
    // handleShumo({
    //     title: activeShumo.value
    // })
    isPop.value = false;
  }

  if (
    activeNv.value == "潮位预报" ||
    activeNv.value == "灾害警报" ||
    activeNv.value == "台风路径"
  ) {
    handleShumo({
      title: activeShumo.value,
    });
  } else {
    if (!activeShumo.value) {
      handleShumo({
        title: "海风",
      });
    }
  }

  // if (activeNv.value == "潮位预报") {
  //   initTideIcon();
  // }
  // else {
  //   pntLayers.forEach((item) => {
  //     Config.mapObj.map.removeLayer(item?.marker);
  //     Config.mapObj.map.removeLayer(item?.text);
  //   });
  // }
});

const pnts = ref([]);
const pnt = ref("");

let tideLayers = [];
let pntLayers = [];
let pntName = ref("");

// 监听时间，绘制24小时的潮位曲线
watch([date, activeNv, station, bm, pnt], async () => {
  if (station.value != "1") {
    return;
  }
  await nextTick();
  if (activeNv.value != "潮位预报") {
    return;
  }

  let pntIdx = pnts.value.findIndex((item) => item.pntId == pnt.value);
  tideLayers.forEach((item, idx) => {
    if (idx == pntIdx) {
      item.setIcon(tideIcon);
    } else {
      item.setIcon(tideIconSmall);
    }
  });


  let data = hourly_tide
    .sort((a, b) => new Date(a.time) - new Date(b.time))
    .map((item) => {
      return {
        time: formatTime(item.time),
        height: item.tideValue,
      };
    });



  // 绘制曲线图
  let myChart = echarts.init(document.getElementById("chart_main"));
  let option = {
    xAxis: {
      type: "category",
      // data: data.map(item => formatTime(addHours(item.time, 8))),
      data: data.map((item) => item.time),
      // 显示小时，只在跨越天数的时候显示日期
      axisLabel: {
        formatter: (value, index) => {
          return value.split(" ")[1].split(":")[0] + "时";
        },
      },
    },
    yAxis: {
      type: "value",
      name: "cm",
    },
    grid: {
      left: "10%",
      right: "10%",
      top: "10%",
      bottom: "10%",
    },
    tooltip: {
      trigger: "axis",
      formatter: (params) => {
        let str = formatTime(params[0].name);
        let arr = str.split(" ")[0].split("-");
        let hour = str.split(" ")[1].split(":")[0];

        return (
          `${arr[0]}年${arr[1]}月${arr[2]}日 ${hour}时` +
          "<br />" +
          params[0].value.toFixed(2) +
          "m"
        );
      },
    },
    series: [
      {
        data: data.map((item) => item.height),
        type: "line",
        showSymbol: false,
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(248, 171, 95, 1)",
            },
            {
              offset: 1,
              color: "rgba(248, 171, 95, 0)",
            },
          ]),
        },
        // 线的颜色
        lineStyle: {
          color: "#F8AB5F",
        },
        // 点的颜色
        itemStyle: {
          color: "#F8AB5F",
        },
      },
      // {
      //   data: data.map((item) => warningValue.value0),
      //   type: "line",
      //   showSymbol: false,
      //   smooth: false,
      //   // 线的颜色
      //   lineStyle: {
      //     color: "#d0021b",
      //     type: "dashed",
      //   },
      // },
    ],
  };
  myChart.setOption(option);
  // });

  // getTideMonth(token, { departmentName: bm.value, pntId: pnt.value }).then((res) => {
  //   let monthData = res.data.data;
  //   // 根据dataTime从小到大排序
  //   monthData.sort((a, b) => {
  //     return new Date(a.dataTime) - new Date(b.dataTime);
  //   });
  //   tableData.value = [];
  //   let num = 0;
  //   // 当前日期
  //   let startDate = formatTime(new Date()).slice(0, 7) + "-01";
  //   let days = new Date(
  //     new Date().getFullYear(),
  //     new Date().getMonth() + 1,
  //     0
  //   ).getDate();
  //   for (let i = 0; i < days; i++) {
  //     let date = addDays(startDate, i);
  //     let data = monthData.filter((item) => item.dataTime.slice(0, 10) == date);
  //     let highIndexArr = [];
  //     let lowIndexArr = [];
  //     data.forEach((item, idx) => {
  //       if (item.varName == "TIDEUP") {
  //         highIndexArr.push(idx);
  //       } else {
  //         lowIndexArr.push(idx);
  //       }
  //     });
  //     // 根据高潮低潮高潮低潮穿插排序一个新数组 缺潮就插入null
  //     let tableDataArr = [];
  //     for (let i = 0; i < 2; i++) {
  //       if (highIndexArr[i] != undefined) {
  //         tableDataArr.push(data[highIndexArr[i]]);
  //       } else {
  //         tableDataArr.push(null); // "**:**"
  //       }
  //       if (lowIndexArr[i] != undefined) {
  //         tableDataArr.push(data[lowIndexArr[i]]);
  //       } else {
  //         tableDataArr.push(null); //"**:**"
  //       }
  //     }
  //     for (let i = 0; i < 2; i++) {
  //       tableData.value.push({
  //         date: date.slice(5, 10),
  //         timeHigh: tableDataArr[i * 2]
  //           ? tableDataArr[i * 2].dataTime.slice(11, 16)
  //           : "**:**",
  //         tideHigh: tableDataArr[i * 2] ? tableDataArr[i * 2].power : "***",
  //         timeLow: tableDataArr[i * 2 + 1]
  //           ? tableDataArr[i * 2 + 1].dataTime.slice(11, 16)
  //           : "**:**",
  //         tideLow: tableDataArr[i * 2 + 1]
  //           ? tableDataArr[i * 2 + 1].power
  //           : "***",
  //       });
  //     }
  //   }

  //   setTimeout(() => {
  //     scroll_Table.value.setScrollTop(currentTableIdx * 40);
  //   }, 0);
  // });
});

const scroll_Table = ref(null);
let currentTableIdx = 0;

// 获取一个日期下一天的日期
const addDays = (date, days) => {
  let d = new Date(date);
  d.setDate(d.getDate() + days);
  // 格式为yyyy-mm-dd
  return d.toISOString().split("T")[0];
};
// 监听station
watch([station, activeNv], () => {
  if (station.value != "2" || activeNv.value != "潮位预报") {
    return;
  }
  // tableData.value = tideData.tide_forecast
  const result = [];
  tableData.value.forEach(item => {
    // 第一行 - 第一高潮和第一低潮
    result.push({
      date: item.date,
      timeHigh: item.first_high_tide.time,
      tideHigh: item.first_high_tide.height,
      timeLow: item.first_low_tide.time,
      tideLow: item.first_low_tide.height,
      isSecondRow: false
    });

    // 第二行 - 第二高潮和第二低潮（如果有）
    if (item.second_high_tide && item.second_low_tide) {
      result.push({
        date: '', // 空字符串表示与上一行日期相同
        timeHigh: item.second_high_tide.time,
        tideHigh: item.second_high_tide.height,
        timeLow: item.second_low_tide.time,
        tideLow: item.second_low_tide.height,
        isSecondRow: true
      });
    } else if (item.second_high_tide) {
      // 只有第二高潮没有第二低潮的情况
      result.push({
        date: '',
        timeHigh: item.second_high_tide.time,
        tideHigh: item.second_high_tide.height,
        timeLow: '-',
        tideLow: '-',
        isSecondRow: true
      });
    } else if (item.second_low_tide) {
      // 只有第二低潮没有第二高潮的情况
      result.push({
        date: '',
        timeHigh: '-',
        tideHigh: '-',
        timeLow: item.second_low_tide.time,
        tideLow: item.second_low_tide.height,
        isSecondRow: true
      });
    }
  });

  tableData.value = result
});

const tableRowClassName = ({ row, rowIndex }) => {
  if (row.date == formatTime(new Date()).slice(5, 10)) {
    if (!currentTableIdx) {
      currentTableIdx = rowIndex;
    }
    return "current-row";
  }
  return "";
};

const loginOut = () => {
  localStorage.removeItem("token");
  localStorage.removeItem("userInfo");
  router.push("/login");
};

const handleNv = (nv) => {
  activeNv.value = nv.title;
  showRight.value = false;
};
const getLinearGradient = (data) => {
  let str = "linear-gradient(to right,";
  data.forEach((item, idx) => {
    str += item.color + " ";
    if (idx != data.length - 1) {
      str += ",";
    }
  });
  str += ")";
  return str;
};

const fName = (name) => {
  if (name?.includes("二厂")) {
    return "2号工程海域";
  } else {
    return "1号3号工程海域";
  }
};
// const spanArr = ref([])
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex == 0) {
    if (rowIndex % 2 == 0) {
      return {
        rowspan: 2,
        colspan: 1
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
}
// handleselect
const isYbWeek = ref(false)
const weekData = ref([])
const weekList = ref([])
// weekList.value = zybData.forecastList
// weekData.value = weekList.value[0]

const yjData = ref([])
const yjList = ref([])
// yjData.value = yjData1.warningInfo
// yjList.value = yjData1.warningList
// yjData.value = yjList.value[0]

const getWarningSummary = (overview) => {
  if (!overview) return ''
  return overview.length > 50 ? overview.substring(0, 50) + '...' : overview
}

const activeWarning = ref(0)
const selectHistoryWarning = (item, idx) => {
  activeWarning.value = idx
  yjData.value = item
  // 可以添加滚动到顶部的逻辑
  document.querySelector('.jb').scrollTo({ top: 0, behavior: 'smooth' })
}

const isJb = ref(false)
const forecastFiles = ref([])
// forecastFiles.value = fileData.forecast_files

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString);
  return `${date.getMonth() + 1}月${date.getDate()}日`;
};

// 获取摘要 (取第一行内容)
const getSummary = (conclusion) => {
  if (!conclusion) return '';
  const firstLine = conclusion.split('\n')[0];
  return firstLine.length > 50 ? firstLine.substring(0, 50) + '...' : firstLine;
};

// 选择历史周报
const activeWeek = ref(0)
const selectHistoryWeek = (item, idx) => {
  activeWeek.value = idx

  weekData.value = item;
  // 可以添加滚动到顶部的逻辑
  document.querySelector('.zyb').scrollTo({ top: 0, behavior: 'smooth' });
};

const currentReports = ref([
  { id: 1, name: '2024年2月海冰简报', url: 'src/assets/pdf/04.红沿河核电站海域海冰简报(20240211) .pdf' },
  { id: 2, name: '2024年1月海冰简报', url: '/pdf/current2.pdf' }
])

const historyReports = ref([
  { id: 3, name: '2023年12月海冰简报', url: '/pdf/history1.pdf' },
  { id: 4, name: '2023年11月海冰简报', url: '/pdf/history2.pdf' },
  { id: 5, name: '2023年10月海冰简报', url: '/pdf/history3.pdf' },
  { id: 6, name: '2023年9月海冰简报', url: '/pdf/history4.pdf' },
  { id: 7, name: '2023年8月海冰简报', url: '/pdf/history5.pdf' },
  { id: 8, name: '2023年7月海冰简报', url: '/pdf/history6.pdf' },
  { id: 9, name: '2023年6月海冰简报', url: '/pdf/history7.pdf' },
  { id: 10, name: '2023年5月海冰简报', url: '/pdf/history8.pdf' },
  { id: 11, name: '2023年4月海冰简报', url: '/pdf/history9.pdf' },
  { id: 12, name: '2023年3月海冰简报', url: '/pdf/history10.pdf' },
  // { id: 13, name: '2023年2月海冰简报', url: '/pdf/history11.pdf' },
  // { id: 14, name: '2023年1月海冰简报', url: '/pdf/history12.pdf' }
])

// PDF查看方法
const viewPdf = (url) => {
  // console.log('查看PDF:', url)
  // 实际查看逻辑...
  return axios({
    method: "get",
    url: 'http://59.110.0.27:1102/public/海冰简报.pdf',
    // url: `${urlTom}${data}`,
    responseType: "blob",
  }).then((res) => {
    pdfDialog.value = true;
    urlObj = res.data;
  });
}



// 警戒值
// const warningValue = 450

warningValue.value = 450
const dateRange = ref([
  // dayjs().subtract(7, 'day').format('YYYY-MM-DD'), // 默认显示最近7天
  // dayjs().format('YYYY-MM-DD')

  dayjs().subtract(7, 'day').format('YYYY-MM-DD'), // 默认显示最近7天
  dayjs().format('YYYY-MM-DD')
])

// 生成日期范围数组
const generateDateRange = (start, end) => {
  const dates = []
  let current = dayjs(start)
  const endDate = dayjs(end)

  while (current.isBefore(endDate) || current.isSame(endDate)) {
    dates.push(current.format('YYYY-MM-DD'))
    current = current.add(1, 'day')
  }
  return dates
}

// 生成模拟数据
const generateData = (start, end) => {
  return generateDateRange(start, end).map(date => ({
    date,
    timeHigh1: `${Math.floor(Math.random() * 24).toString().padStart(2, '0')}:${Math.floor(Math.random() * 60).toString().padStart(2, '0')}`,
    tideHigh1: Math.floor(Math.random() * 500 + 200),
    timeLow1: `${Math.floor(Math.random() * 24).toString().padStart(2, '0')}:${Math.floor(Math.random() * 60).toString().padStart(2, '0')}`,
    tideLow1: Math.floor(Math.random() * 300 + 100),

    timeHigh2: `${Math.floor(Math.random() * 24).toString().padStart(2, '0')}:${Math.floor(Math.random() * 60).toString().padStart(2, '0')}`,
    tideHigh2: Math.floor(Math.random() * 500 + 200),
    timeLow2: `${Math.floor(Math.random() * 24).toString().padStart(2, '0')}:${Math.floor(Math.random() * 60).toString().padStart(2, '0')}`,
    tideLow2: Math.floor(Math.random() * 300 + 100),
  }))
}

// 表格数据
const tableDataM = computed(() => {
  // if (!dateRange.value || dateRange.value.length !== 2) return []

  return generateData(twcParams.startDate, twcParams.endDate)
})

// console.log('tableDataM:', tableDataM.value);


// 日期变化处理
const handleDateChange = (val) => {
  console.log('日期范围变化:', val)
}

// 表格行样式
const tableRowClassNameM = ({ rowIndex }) => {
  return rowIndex % 2 === 1 ? 'stripe-row' : ''
}


const showBottomDate = ref(false);
const currentDate = ref(['2024', '01', '01']);
const dateTimeType = ref('startDate')
const twcParams = reactive({
  startDate: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
  endDate: dayjs().format('YYYY-MM-DD')
})

const handleShowDate = (date, type) => {
  dateTimeType.value = type
  showBottomDate.value = true
  currentDate.value = date.split('-')
}

const timeConfirm = () => {
  showBottomDate.value = false
  if (dateTimeType.value == 'startDate') {
    twcParams.startDate = `${currentDate.value[0]}-${currentDate.value[1]}-${currentDate.value[2]}`
  } else {
    twcParams.endDate = `${currentDate.value[0]}-${currentDate.value[1]}-${currentDate.value[2]}`
  }
}

const timeCancel = () => {
  showBottomDate.value = false
}

// 模拟数据
const weatherData = ref({
  wind: [],
  wave: [],
  current: [],
  temp: [],
  seatemp: [],
})

// 时间标签
const timeLabels = ref([])
// 日期标签
const dateLabels = ref([])

// 星期映射
const weekMap = ['日', '一', '二', '三', '四', '五', '六']

// 生成72小时时间标签和日期标签
const generateLabels = () => {
  const now = new Date()
  // 小时+1
  now.setHours(now.getHours() + 1)
  const timeLabels = []
  const dateLabels = []
  let currentDay = -1

  for (let i = 0; i < 24 * 2; i++) {
    const time = new Date(now.getTime() + i * 60 * 60 * 1000)
    const hours = time.getHours().toString().padStart(2, '0')
    timeLabels.push(`${hours}:00`)

    // 每天只显示一次日期
    const day = time.getDate()
    if (day !== currentDay) {
      currentDay = day
      const month = time.getMonth() + 1
      dateLabels.push({
        date: `${month}月${day}日`,
        // week: `星期${weekMap[time.getDay()]}`
      })
    } else {
      dateLabels.push({ date: '', week: '' })
    }
  }

  return { timeLabels, dateLabels }
}

// 生成模拟数据
const generateMockData = () => {
  const mockData = {
    wind: [],
    wave: [],
    current: [],
    temp: [],
    seatemp: [],
  }

  for (let i = 0; i < 24 * 3; i++) {
    // 风速风向
    mockData.wind.push({
      speed: (Math.random() * 15).toFixed(1),
      direction: Math.floor(Math.random() * 360)
    })

    // 浪高浪向
    mockData.wave.push({
      height: (Math.random() * 5).toFixed(1),
      direction: Math.floor(Math.random() * 360)
    })

    // 流速流向
    mockData.current.push({
      speed: (Math.random() * 2).toFixed(1),
      direction: Math.floor(Math.random() * 360)
    })

    // 温度
    mockData.temp.push((Math.random() * 30 + 10).toFixed(1))

    // 海水温度
    mockData.seatemp.push((Math.random() * 30 + 10).toFixed(1))


  }

  return mockData
}

// 统一的获取气象数据的背景颜色
const getWeatherColor = (type, value) => {
  const colors = Config.scalarColor[type]

  let color = '#FFFFFF'
  for (let i = 0; i < colors.length; i++) {
    if (value >= colors[i].value) {
      // return colors[i].color
      color = colors[i].color
    }
  }
  return color

}
// getWeatherColor('seatemp', 10)
// 风速颜色映射
const getWindColor = (speed) => {
  const s = parseFloat(speed)
  if (s < 5) return '#a8e6cf'
  if (s < 10) return '#dcedc1'
  if (s < 15) return '#ffd3b6'
  return '#ffaaa5'
}

// 浪高颜色映射
const getWaveColor = (height) => {
  const h = parseFloat(height)
  if (h < 1) return '#a8e6cf'
  if (h < 2) return '#dcedc1'
  if (h < 3) return '#ffd3b6'
  return '#ffaaa5'
}

// 流速颜色映射
const getCurrentColor = (speed) => {
  const s = parseFloat(speed)
  if (s < 0.5) return '#a8e6cf'
  if (s < 1) return '#dcedc1'
  if (s < 1.5) return '#ffd3b6'
  return '#ffaaa5'
}

// 初始化
onMounted(() => {
  const labels = generateLabels()
  timeLabels.value = labels.timeLabels
  dateLabels.value = labels.dateLabels
  // weatherData.value = generateMockData()
})
</script>

<template>
  <div id="home">
    <section id="map" @click="handleMapSz"></section>
    <!-- <div id="map_tools" v-if="activeNv != '灾害警报'"
      :style="{ top: (activeNv == '台风路径' || activeNv == '灾害警报' || activeNv == '潮位预报') ? '50px' : '80px' }">
      <div v-for="(tool, idx) in tools" :key="tool" class="tool" @click="handleTool(idx)"
        v-show="!(idx > 2 && activeNv != '台风路径')">
        <img :src="tool.icon" alt="" />
      </div>
    </div> -->

    <!-- 粒子和数值那些 -->
    <!-- <div id="map_lizi" v-if="activeNv == '数值预报'">
            <div v-for="item in lizis" class="lizi_item" @click="handleLizi(item)">
                <img :src="activeLi.includes(item.title) ? item.iconActive : item.icon" alt="">
                <div :style="{ color: activeLi.includes(item.title) ? '#266DF1' : '' }">{{ item.title }}</div>
            </div>
        </div> -->
    <!-- 图例 -->
    <div id="scalarlegend" v-show="isShowLegend" :style="{
      background: getLinearGradient(legendArrData),
    }">
      <div v-for="(item, index) in legendArrData" :key="index" class="legend-item"
        :style="{ color: item.fontcolor ? item.fontcolor : '#FFFFFF' }">
        {{ item.value }}
      </div>
    </div>

    <section id="zh" v-if="activeNv == '综合预报'" :style="(!isYbWeek && !isJb) ? { height: activeHight + 'px' } : {}">
      <div id="header">
        <span id="title" v-if="isYbWeek">周预报</span>
        <span id="title" v-else-if="isJb">海浪警报</span>
        <span id="title" v-else>日预报</span>

        <span v-show="isYbWeek || isJb" style="position: absolute; right: 0;color: #D0021B;"
          @click="isYbWeek = false; isJb = false">
          关闭
        </span>
      </div>

      <div v-if="weekData?.conclusion && isYbWeek" class="zyb">
        <div class="report-meta">
          <span class="publish-time">
            <i class="icon-clock" id="day_h"></i> {{ weekData.publishTime }} 发布
          </span>
        </div>

        <div class="report-section">
          <h3 class="section-title">预测结论</h3>
          <p class="conclusion-text" v-for="item in weekData.conclusion.split(/\n/g)">{{ item }}</p>
        </div>

        <div class="report-section suggestion">
          <h3 class="section-title">建议</h3>
          <p class="suggestion-text">{{ weekData.suggestion }}</p>
        </div>
      </div>

      <div v-else-if="isJb" class="zyb">
        <div class="report-meta">
          <span class="publish-time">
            <i class="icon-clock" id="day_h"></i> {{ yjData.publishTime }} 发布
          </span>
        </div>

        <div class="report-section">
          <h3 class="section-title">系统概述</h3>
          <p class="conclusion-text" v-for="item in yjData.systemOverview.split(/\n/g)">{{ item }}</p>
        </div>

        <div class="report-section">
          <h3 class="section-title">预警结论</h3>
          <p class="conclusion-text" v-for="item in yjData.warningConclusion.details.split(/\n/g)">{{ item }}</p>
        </div>

        <div class="report-section suggestion">
          <h3 class="section-title">建议</h3>
          <p class="suggestion-text">{{ yjData.warningConclusion.suggestion }}</p>
        </div>
      </div>

      <div id="day_3" v-else>
        <div class="day_item" v-for="(day, dayIndex) in forecastData" :key="'day-' + dayIndex">
          <template v-for="(period, periodIndex) in day.periods" :key="'period-'+dayIndex+'-'+periodIndex">
            <div class="day_h" @click="handleFold(period, dayIndex * 2 + periodIndex)">
              <img class="img_t" :src="iconTime" alt="" />
              {{ day.date }} {{ period.time_range }}
              <img class="img_x" :src="!isshowArr[dayIndex * 2 + periodIndex] ? iconXia : iconShang" alt="" />
            </div>

            <div class="day_m" v-show="isshowArr[dayIndex * 2 + periodIndex]">
              <div class="m_i">
                <div class="hour_header">
                  <img :src="iconFeng" alt="" />
                  <span>海风</span>
                </div>
                <div class="fff">
                  <div class="vvv">{{ period.wind.speed }}级</div>
                </div>
                <div class="fff">
                  <div class="vvv">{{ period.wind.direction }}风</div>
                </div>
              </div>

              <div class="m_i">
                <div class="hour_header">
                  <img :src="iconLang" alt="" />
                  <span>海浪</span>
                </div>
                <div class="fff">
                  <div class="vvv">围堰内: {{ period.wave_height.inside_cofferdam }}米</div>
                </div>
                <div class="fff">
                  <div class="vvv">外海北: {{ period.wave_height.north_sea }}米</div>
                </div>
                <div class="fff">
                  <div class="vvv">外海西: {{ period.wave_height.west_sea }}米</div>
                </div>
              </div>

              <div class="m_i">
                <div class="hour_header">
                  <img :src="iconTian" alt="" />
                  <span>海温</span>
                </div>
                <div class="fff">
                  <div class="vvv">围堰内: {{ period.water_level.inside_cofferdam }}℃</div>
                </div>
                <div class="fff">
                  <div class="vvv">外海北: {{ period.water_level.north_sea }}℃</div>
                </div>
                <div class="fff">
                  <div class="vvv">外海西: {{ period.water_level.west_sea }}℃</div>
                </div>
              </div>
            </div>
          </template>
        </div>
        <!-- <img src="http://59.110.0.27:1102/public/img/dalian/wind/2025041202/d01WIND.png" alt="" srcset=""> -->

      </div>
    </section>
    <section id="sz" v-else-if="activeNv == '数值预报'">
      <!-- 有两部分，一部分是时间条，另一部分是时序曲线 -->
      <div v-if="isShowChart">
        <img src="../assets/img/下拉.png" alt="" @click="handleSzChartClose" />
        <div id="header">
          时间：{{ getChDate1(formatTime(addHours(day3.startDateTime, 0))) }} -
          {{ getChDate1(formatTime(addHours(day3.endDateTime, -1))) }}
        </div>

        <div class="weather-container">
          <!-- <h2 class="title">72小时海洋气象预报</h2> -->

          <div class="scroll-wrapper">
            <!-- 固定标签列 -->
            <div class="fixed-column">
              <!-- <div class="fixed-header"></div> -->
              <div class="fixed-row" style="height: 30px;">日期</div>
              <div class="fixed-row" style="height: 30px;">时间</div>
              <div class="fixed-row" style="height: 50px;">
                <span>风速</span>
                <span>m/s</span>
              </div>
              <div class="fixed-row" style="height: 50px;">
                <span>浪高</span>
                <span>m</span>
              </div>
              <div class="fixed-row" style="height: 50px;">
                <span>流速</span>
                <span>m/s</span>
              </div>

              <div class="fixed-row" style="height: 30px;">海温</div>
              <div class="fixed-row" style="height: 30px;">水温</div>

            </div>

            <!-- 可滚动数据列 -->
            <div class="scroll-container" ref="scrollContainer">
              <!-- 日期和星期行 -->
              <div class="date-row">
                <div class="date-cells">
                  <div class="date-cell" v-for="(date, index) in dateLabels" :key="'date' + index">
                    <div v-if="date.date">{{ date.date }}</div>
                    <div v-if="date.week">{{ date.week }}</div>
                  </div>
                </div>
              </div>

              <!-- 时间行 -->
              <div class="time-row">
                <div class="time-cells">
                  <div class="time-cell" v-for="(time, index) in timeLabels" :key="'time' + index">
                    {{ time }}
                  </div>
                </div>
              </div>

              <!-- 风速行 -->
              <div class="data-row">
                <div class="data-cells">
                  <div class="data-cell" v-for="(item, index) in weatherData.wind" :key="'wind' + index">
                    <div class="value" :style="{ backgroundColor: getWeatherColor('wind', item.speed) }">{{ item.speed
                    }}
                    </div>
                    <div class="arrow" :style="{ transform: `rotate(${item.direction}deg)` }">4</div>
                  </div>
                </div>
              </div>

              <!-- 浪高行 -->
              <div class="data-row">
                <div class="data-cells">
                  <div class="data-cell" v-for="(item, index) in weatherData.wave" :key="'wave' + index">
                    <div class="value" :style="{ backgroundColor: getWeatherColor('wave', item.height) }">{{ item.height
                    }}
                    </div>
                    <div class="arrow" :style="{ transform: `rotate(${item.direction}deg)` }">4</div>
                  </div>
                </div>
              </div>

              <!-- 流速行 -->
              <div class="data-row">
                <div class="data-cells">
                  <div class="data-cell" v-for="(item, index) in weatherData.current" :key="'current' + index">
                    <div class="value" :style="{ backgroundColor: getWeatherColor('current', item.speed) }">{{
                      item.speed
                    }}
                    </div>
                    <div class="arrow" :style="{ transform: `rotate(${item.direction}deg)` }">4</div>
                  </div>
                </div>
              </div>

              <!-- 海温行 -->
              <div class="time-row">
                <div class="time-cells">
                  <div class="time-cell" v-for="(item, index) in weatherData.temp" :key="'temp' + index">
                    <div class="value" :style="{ backgroundColor: getWeatherColor('temp', item) }">{{ item }}</div>
                  </div>
                </div>
              </div>

              <!-- 水温行 -->
              <div class="time-row">
                <div class="time-cells">
                  <div class="time-cell" v-for="(item, index) in weatherData.seatemp" :key="'seatemp' + index">
                    <div class="value" :style="{ backgroundColor: getWeatherColor('seatemp', item) }">{{ item }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div style="
            display: flex;
            height: 36px;
            background-color: #f4f7fd;
            border-radius: 18px 18px 18px 18px;
            align-items: center;
            justify-content: space-around;
            margin: 5px 12px;
          ">
          <div class="sz_t" v-for="item in ['海风', '海浪', '海流']" @click="handleActiveType(item)" :style="{
            color: activeType == item ? '#FFFFFF' : '',
            backgroundColor: activeType == item ? '#006FFA' : '',
          }">
            {{ item }}
          </div>
        </div> -->
        <!-- <div id="chart_main"></div>  -->
      </div>
      <div v-else>
        <img :src="isBofang ? iconZanting : iconBofang" alt="" style="
            position: absolute;
            left: 20px;
            height: 30px;
            width: 30px;
            top: -5px;
          " @click="handleBofang" />
        <a-slider v-model:value="timeHour" :marks="marks" :max="72" :tooltipOpen="true" :tipFormatter="tipFormatter"
          style="margin: 10px 30px; height: 30px; margin-left: 50px">
          <template #mark="{ label, point }">
            <template v-if="point === 72">
              <strong>{{ label }}</strong>
            </template>
            <template v-else>{{ label }}</template>
          </template>
        </a-slider>
      </div>
    </section>
    <section id="cx" v-else-if="activeNv == '潮位预报'">
      <div id="header">
        <div style="font-size: 16px; font-family: 'aliph400'">
          {{ getDqDate() }}
        </div>
        <el-select v-model="station" placeholder="请选择" size="" style="width: 110px">
          <el-option v-for="item in stations" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div id="chart_main" v-if="station == '1'"></div>
      <div id="table_main" v-else>
        <el-table ref="scroll_Table" :data="tableData" style="width: 100%; margin: 10px 0px; height: 100%"
          :row-class-name="tableRowClassName" :span-method="objectSpanMethod">
          <el-table-column prop="date" label="日期" align="center" width="80" />
          <el-table-column label="高潮" align="center">
            <el-table-column prop="timeHigh" label="潮时" align="center" width="70" />
            <el-table-column prop="tideHigh" label="潮位(cm)" align="center">
              <template #default="{ row }">
                <div :style="{ color: row.tideHigh > warningValue ? 'red' : '' }">
                  {{ row.tideHigh }}
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="低潮" align="center">
            <el-table-column prop="timeLow" label="潮时" align="center" width="70" />
            <el-table-column prop="tideLow" label="潮位(cm)" align="center">
              <template #default="{ row }">
                <div :style="{ color: row.tideLow > warningValue ? 'red' : '' }">
                  {{ row.tideLow }}
                </div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </section>

    <section v-else-if="activeNv === '天文潮'" class="tide-container">
      <!-- <div class="header">
        <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="handleDateChange" />
      </div> -->

      <div class="header">
        <div id="t_p">
          <div>
            开始时间：
          </div>
          <div class="p_i" @click="handleShowDate(twcParams.startDate, 'startDate')">
            {{ twcParams.startDate }}
          </div>
        </div>
        <div id="t_p" style="margin-top: 5px;">
          <div>
            终止时间：
          </div>
          <div class="p_i" @click="handleShowDate(twcParams.endDate, 'endDate')">
            {{ twcParams.endDate }}
          </div>
        </div>
      </div>

      <van-popup v-model:show="showBottomDate" round position="bottom" :style="{ height: '30%' }"
        @click-overlay="timeConfirm">
        <van-date-picker v-model="currentDate" title="选择日期" :min-date="minDate" :max-date="maxDate"
          @confirm="timeConfirm" @cancel="timeCancel" />
      </van-popup>

      <div class="table-wrapper">
        <el-table ref="scrollTable" :data="tableDataM" style="width: 100%; height: 100%"
          :row-class-name="tableRowClassNameM" :span-method="objectSpanMethod">

          <el-table-column prop="date" label="日期" align="center" width="80" />

          <el-table-column label="高潮" align="center">
            <el-table-column prop="timeHigh1" label="潮时" align="center" width="70" />
            <el-table-column prop="tideHigh1" label="潮位(cm)" align="center">
              <template #default="{ row }">
                <div :style="{ color: row.tideHigh1 > warningValue ? 'red' : '' }">
                  {{ row.tideHigh1 }}
                </div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="低潮" align="center">
            <el-table-column prop="timeLow1" label="潮时" align="center" width="70" />
            <el-table-column prop="tideLow1" label="潮位(cm)" align="center">
              <template #default="{ row }">
                <div :style="{ color: row.tideLow1 > warningValue ? 'red' : '' }">
                  {{ row.tideLow1 }}
                </div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="高潮" align="center">
            <el-table-column prop="timeHigh2" label="潮时" align="center" width="70" />
            <el-table-column prop="tideHigh2" label="潮位(cm)" align="center">
              <template #default="{ row }">
                <div :style="{ color: row.tideHigh2 > warningValue ? 'red' : '' }">
                  {{ row.tideHigh2 }}
                </div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="低潮" align="center">
            <el-table-column prop="timeLow2" label="潮时" align="center" width="70" />
            <el-table-column prop="tideLow2" label="潮位(cm)" align="center">
              <template #default="{ row }">
                <div :style="{ color: row.tideLow2 > warningValue ? 'red' : '' }">
                  {{ row.tideLow2 }}
                </div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>

      </div>
    </section>

    <section id="file" v-else-if="activeNv == '预报文件'">
      <div style="font-family: 'aliph500'; font-size: 22px; margin-left: 10px">
        历史预报文件
      </div>
      <div class="zhai_his">
        <template v-if="forecastFiles.length > 0">
          <div v-for="item in forecastFiles" class="his_item1">
            <div class="his_time">{{ item.publish_date }}</div>
            <div class="his_value">
              {{ item.file_name }}
            </div>
            <div @click="handleLook(item)" class="his_look">查看</div>
          </div>
        </template>
        <template v-else>
          <div class="zhai_no_txt" style="margin-top: 50px">暂无预报文件</div>
        </template>
      </div>
    </section>

    <section id="zb" v-else-if="activeNv == '周预报'">
      <div v-if="weekData?.conclusion" class="zyb">
        <div class="report-meta">
          <span class="publish-time">
            <i class="icon-clock" id="day_h"></i> {{ weekData.publishTime }} 发布
          </span>
        </div>

        <div class="report-section">
          <h3 class="section-title">预测结论</h3>
          <p class="conclusion-text" v-for="item in weekData.conclusion.split(/\n/g)">{{ item }}</p>
        </div>

        <div class="report-section suggestion">
          <h3 class="section-title">建议</h3>
          <p class="suggestion-text">{{ weekData.suggestion }}</p>
        </div>
      </div>

      <div class="zyb_list">
        <h3 class="list-title">往期周报</h3>
        <div class="list-container">
          <div v-for="(item, index) in weekList" :key="index" class="list-item" @click="selectHistoryWeek(item, index)"
            :class="{ 'active': activeWeek == index }">
            <div class="item-date">{{ formatDate(item.publishTime) }}</div>
            <div class="item-summary">{{ getSummary(item.conclusion) }}</div>
            <i class="icon-arrow"></i>
          </div>
        </div>
      </div>
    </section>

    <section id="zhai" v-else-if="activeNv == '灾害警报'">
      <div class="jb">
        <div class="report-meta">
          <span class="publish-time">
            <i class="icon-clock" id="day_h"></i> {{ yjData?.publishTime }} 发布
          </span>
        </div>

        <div class="report-section">
          <h3 class="section-title">系统概述</h3>
          <p class="conclusion-text" v-for="item in yjData?.systemOverview.split(/\n/g)">{{ item }}</p>
        </div>

        <div class="report-section warning-conclusion">
          <h3 class="section-title">预警结论</h3>
          <!-- <p class="conclusion-text" v-for="item in yjData.details.split(/\n/g)">{{ item }}</p> -->
          <p class="conclusion-text">{{ yjData?.details.split(/\n/g)[0] }}</p>
        </div>

        <div class="report-section suggestion warning-suggestion">
          <h3 class="section-title">建议</h3>
          <!-- <p class="suggestion-text">{{ yjData.warningConclusion.suggestion }}</p> -->
          <p class="suggestion-text">{{ yjData?.details.split(/\n/g)[1] }}</p>

        </div>
      </div>

      <div class="jb_list">
        <h3 class="list-title">历史警报</h3>
        <div class="list-container">
          <div v-for="(item, index) in yjList" :key="index" class="list-item" @click="selectHistoryWarning(item, index)"
            :class="{ 'active': activeWarning == index }">
            <div class="item-date">{{ formatDate(item.publishTime) }}</div>
            <div class="item-summary">{{ getWarningSummary(item.systemOverview) }}</div>
            <i class="icon-arrow"></i>
          </div>
        </div>
      </div>
    </section>

    <section id="hb" v-else-if="activeNv === '海冰简报'">
      <div class="report-container">
        <!-- 当前简报 -->
        <div class="current-report">
          <h3 class="section-title">海冰简报</h3>
          <div v-for="item in currentReports" :key="item.id" class="pdf-item current" @click="handleLook(item)">
            📄 {{ item.file_name }}
          </div>
        </div>

        <!-- 历史简报 -->
        <!-- <div class="history-reports">
          <h3 class="section-title">历史海冰简报</h3>
          <div v-for="item in historyReports" :key="item.id" class="pdf-item history" @click="viewPdf(item.url)">
            📜 {{ item.name }}
          </div>
        </div> -->
      </div>
    </section>


    <!-- <section id="zhai" v-else-if="activeNv == '灾害警报'">
      <div style="
          display: flex;
          height: 46px;
          background-color: #f4f7fd;
          border-radius: 18px 18px 18px 18px;
          align-items: center;
          justify-content: space-around;
          margin: 12px 12px;
          width: calc(100% - 24px);
        ">
        <div class="zhai_t" v-for="item in ['海浪警报', '风暴潮警报']" @click="activeTab = item" :style="{
          color: activeTab == item ? '#FFFFFF' : '',
          backgroundColor: activeTab == item ? '#006FFA' : '',
        }">
          {{ item }}
          <img v-if="
            homeAlarm.filter((v) =>
              v.value.includes(item == '海浪警报' ? '海浪' : '风暴潮')
            ).length > 0
          " :src="iconGantan" alt="" style="position: absolute; right: 15px; height: 15px" />
        </div>
      </div>
      <template v-if="currentAlarm.length == 0">
        <img class="zhai_no_img" :src="activeTab == '海浪警报' ? iconWaveNo : iconFbcNo" alt="" />
        <div class="zhai_no_txt">24小时内暂无警报</div>
      </template>
      <template v-else>
        <div class="zhai_his" style="flex: none;">
          <div style="display: flex; align-items: center; width: 100%;height: 50px;">
            <div style="
                font-family: 'aliph500';
                font-size: 18px;
                margin-left: 10px;
              ">
              当前警报
            </div>
          </div>

          <div v-for="item in currentAlarm" class="his_item">
            <div class="his_time">{{ item.date }}</div>
            <div class="his_value" :style="{ color: getAlarmColor(item.value) }">
              {{ item.value }}
            </div>
            <span @click="handleLook(item.url)">查看</span>
          </div>
        </div>
      </template>

      <div class="zhai_his">
        <div style="display: flex; align-items: center; width: 100%; padding: 10px">
          <div style="font-family: 'aliph500'; font-size: 18px; margin-left: 10px">
            历史警报
          </div>
          <el-select v-model="alarmYear" placeholder="请选择" size=""
            style="width: 95px; margin-right: 10px; margin-left: auto">
            <el-option v-for="item in alarmYears" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <template v-if="hisAlarms[activeTab].length > 0">
          <div v-for="item in hisAlarms[activeTab]" class="his_item">
            <div class="his_time">{{ getChDate1(item.date) }}</div>
            <div class="his_value" :style="{ color: getAlarmColor(item.value) }">
              {{ item.value }}
            </div>
            <span @click="handleLook(item.url)">查看</span>
          </div>
        </template>
        <template v-else>
          <div class="zhai_no_txt" style="margin-top: 50px">本年度无警报</div>
        </template>
      </div>
    </section> -->

    <!-- 数值预报的弹窗 -->
    <div ref="pop_ref" id="pop" style="position: fixed" :style="style" v-show="isPop">
      <div id="pop_main">
        <div id="header">
          <div class="header_item">
            <img id="h_jw" src="../assets/img/icon-经纬度.png" alt="" />
            <div>
              {{ popInfo.name != "" ? popInfo.name : popInfo.position }}
            </div>
            <img id="h_close" src="../assets/img/icon-关闭.png" alt="" @click="handlePopClose" />
          </div>
          <div class="header_item">
            <img id="h_jw_t" src="../assets/img/时间.png" alt="" />

            <div>{{ popInfo3.time }}</div>
          </div>
        </div>

        <div id="main">
          <!-- <div>{{ popInfo.time }}</div>
                    <div>{{ popInfo.label[0] }}: {{ popInfo.value }}</div>
                    <div>{{ popInfo.label[1] }}: {{ getAngle(popInfo.angle, activeShumo) }}</div> -->
          <el-row v-show="popInfo3.waveHeight && popInfo3.waveDirection">
            <el-col :span="3">海浪:</el-col>
            <el-col :span="11">{{ popInfo3.waveHeight }} m（{{ getAngle(popInfo3.waveDirection, "海浪") }}）</el-col>
            <!-- <el-col :span="10">风暴潮: {{ popInfo3.surge }}m</el-col> -->
            <el-col :span="10">气温: {{ popInfo3.temp }}℃</el-col>


          </el-row>

          <el-row v-show="popInfo3.windSpeed && popInfo3.windDirection">
            <el-col :span="3">海风:</el-col>
            <el-col :span="11">{{ popInfo3.windSpeed }} m/s（{{ getAngle(popInfo3.windDirection, "海风正") }}）</el-col>
            <!-- <el-col :span="6">{{
              getAngle(popInfo3.windDirection, "海风正")
            }}</el-col> -->
            <el-col :span="10">海温: {{ popInfo3.seatemp }}℃</el-col>



          </el-row>

          <el-row v-show="popInfo3.currentSpeed && popInfo3.currentDirection">
            <el-col :span="3">海流:</el-col>
            <el-col :span="11">{{ popInfo3.currentSpeed }} m/s（{{ getAngle(popInfo3.currentDirection, "海流") }}）</el-col>
            <!-- <el-col :span="6">{{
              getAngle(popInfo3.currentDirection, "海流")
            }}</el-col> -->
          </el-row>
        </div>
        <img id="chart_img" src="../assets/img/图表.png" alt="" @click="handleChart" />
      </div>

      <div id="red_p"></div>
    </div>

    <!-- 数模的类型和方向 -->
    <div id="sm_date" v-show="activeShumo">
      <span> {{ smDate }} ({{ activeShumo }}) </span>
    </div>

    <!-- <div class="wjb" v-show="activeNv == '综合预报'">
      <span v-if="yjData?.publishTime" @click="activeNv = '灾害警报'">海浪预警</span>
      <span v-else>暂无警报</span>

    </div> -->

    <!-- 审图号 -->
    <div :style="{ bottom: activeHightBq + 'px' }" id="sth" v-if="activeNv != '灾害警报'">
      GS(2017)508号 数据来源:国家地理信息公共服务平台
    </div>

    <div id="jb_home" v-show="activeNv == '综合预报'">
      <div class="jb_home_item" v-for="item in ['海浪蓝色']" :style="{ backgroundColor: getAlarmColor(item) }"
        @click="handleGoAlarm(item)">
        <img :src="getAlarmImg(item)" alt="" />
      </div>
    </div>
    <img src="../assets/img/菜单白.png" alt="" style="
        position: fixed;
        top: 40px;
        right: 5px;
        height: 40px;
        z-index: 999;
        background-color: #3069c7;
        border-radius: 50%;
        padding: 7px;
        z-index: 999;
      "
      :style="{ top: (activeNv == '台风路径' || activeNv == '灾害警报' || activeNv == '潮位预报' || activeNv == '周预报' || activeNv == '预报文件' || activeNv == '海冰简报' || activeNv == '潮位预报' || activeNv == '天文潮') ? '10px' : '40px' }"
      @click="showRight = true" />

    <van-popup id="menu_pop" v-model:show="showRight" position="right"
      :style="{ width: '50%', height: '100%', color: '#FFFFFF' }">
      <div class="menu_pop_item">
        <div class="menu_pop_title">
          <img src="../assets/img/菜单-实色 (1).png" alt="" style="height: 20px; margin-left: 10px" />
          <span style="color: #f4f7fd"> 导航菜单 </span>
        </div>
        <div class="menu_pop_main" id="dhcd">
          <div v-for="nv in nvs" :key="nv.title" class="dhcd_i" :class="{ active: nv.title == activeNv }"
            @click="handleNv(nv)">
            <div class="i1" style="flex: 1;align-items: center;justify-content:end;display: flex;">
              <img :src="nv.title == activeNv ? nv.iconActive : nv.icon" alt="" style="height: 20px;" />
            </div>
            <div class="i2" style="flex: 3;align-items: center;justify-content: center;text-align: center;">
              <span>{{ nv.title
              }}</span>
            </div>

          </div>
        </div>
      </div>

      <!-- 开关切换 -->
      <div class="menu_pop_item" style="background: #3069c755">
        <div class="menu_pop_title">
          <img src="../assets/img/icon-开关设置.png" alt="" style="height: 20px; margin-left: 10px" />
          <span style="color: #ffffff"> 数值预报设置 </span>
        </div>
        <div class="menu_pop_main" id="szyb">
          <div class="shumo_in" v-for="item in shumoInfo" @click="handleShumo(item)">
            <!-- <div class="shumo_i"
                            :style="{ backgroundColor: activeShumo == item.title ? '#266DF1' : '' }"> -->
            <div style="padding: 2px 10px; border-radius: 50%" :style="{
              backgroundColor:
                activeShumo == item.title ? '#0070FA00' : '#E6E6E600',
            }">
              <img :src="activeShumo == item.title ? item.iconActive : item.icon" alt=""
                style="height: 20px; width: 22px" />
            </div>
            <div style="margin-top: 5px" :style="{
              color: activeShumo == item.title ? 'rgb(5 241 255)' : '#FFFFFF',
            }">
              {{ item.title }}
            </div>
            <!-- </div> -->

            <!-- <img :src="activeLi.includes(item.title) ? item.icon : item.icon"
                            style="height: 18px;margin:0 10px;">
                        <span :style="{ color: activeLi.includes(item.title) ? 'rgb(5 241 255)' : '#FFFFFF' }">{{ item.title
                            }}</span>
                        <!== 选择器 ==>
                        <el-switch v-model="item.isShow" active-color="#13ce66" inactive-color="#ff4949"
                            style="margin-left: 25px;" @click="handleShumo(item)"></el-switch> -->
          </div>
        </div>
        <div class="menu_pop_main" id="kgsz">
          <div v-for="item in lizis" :key="item.title" class="kgsz_i">
            <img :src="activeLi.includes(item.title) ? item.iconActive : item.icon"
              style="height: 18px; margin: 0 10px" />
            <span :style="{
              color: activeLi.includes(item.title)
                ? 'rgb(5 241 255)'
                : '#FFFFFF',
            }">{{ item.title }}</span>
            <!-- 选择器 -->
            <el-switch v-model="item.isShow" active-color="#13ce66" inactive-color="#ff4949" style="margin-left: 0.5vw"
              @click="handleLizi(item)"></el-switch>
          </div>
        </div>
      </div>

      <div id="loginOut" @click="loginOut">退出登录</div>
    </van-popup>


    <div v-if="pdfDialog" id="pdfDia">
      <img :src="iconClose" alt="" srcset="" @click="pdfDialog = false" />
      <ComPdfW v-if="pdfDialog" :urlObj="urlObj" style="height: 100vh" />
    </div>
  </div>
</template>

<style lang="less" scoped>
#home {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  :deep(.el-select__wrapper) {
    background: #fafafa;
    border-radius: 6px;
    border: 0px solid #e6e6e6;
  }

  :deep(.el-select__selected-item) {
    span {
      font-family: "aliph400";
      color: #2e2e33;
    }
  }

  :deep(.el-input__inner) {
    font-family: "aliph400";
    color: #2e2e33;
  }

  #map {
    flex: 1;
    width: 100%;
  }

  #pdfDia {
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    padding-top: 30px;
    background-color: #ffffff;

    img {
      position: absolute;
      right: 5px;
      top: 5px;
      z-index: 999;
      height: 20px;
    }
  }

  #menu_pop {
    // background-color: #F0F2F5;
    // background: #FFFFFF;
    background: #56585cdd;
    padding: 15px;
    display: flex;
    flex-direction: column;

    // opacity: 0.8;
    .menu_pop_item {
      // height: 100px;
      // background-color: #ffffff;
      // margin: 10px;
      // border-radius: 6px;
      // opacity: 1;
      // padding: 15px;
      padding-top: 15px;
      background: #565673aa;
      border-radius: 15px;
      margin: 5px 0;

      .menu_pop_title {
        font-family: "aliph500";
        font-size: 18px;
        color: #2e2e33;
        text-align: center;
        border-bottom: 1px solid #e6e6e6;
        display: flex;
        align-items: center;
        padding-bottom: 12px;

        img {
          margin-right: 10px;
        }
      }

      .menu_pop_main {
        display: flex;
        // 换行
        flex-wrap: wrap;
        // flex-direction: column;
        padding-top: 15px;
        padding-bottom: 10px;
      }

      #dhcd {
        // 3行2列 grid布局
        display: grid;
        // grid-template-columns: 1fr 1fr;
        // grid-template-rows: 1fr 1fr 1fr;
        gap: 12px;

        .dhcd_i {
          margin: 0 10px;
          padding: 5px 0px;
          font-size: 18px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #fafafa00;
          border-radius: 27px;
          border: 0px solid #e6e6e6;
          font-family: "aliph400";

          &.active {
            background: rgba(255, 165, 0, 0.75);
            border: 0 solid #0070fa;
            // color: #0070FA;
          }
        }
      }

      #szyb {
        display: flex;
        // justify-content: space-between;
        padding: 10px;

        .shumo_in {
          font-size: 16px;
          font-family: "aliph400";
          color: #ffffff;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 33.33%;
        }
      }

      #kgsz {
        display: flex;
        flex-direction: column;
        padding: 0 5px;

        .kgsz_i {
          padding-bottom: 15px;
          font-size: 1rem;
          font-family: "aliph400";
          color: #ffffff;
          display: flex;
          align-items: center;
        }
      }
    }

    #loginOut {
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: "aliph400";
      font-size: 16px;
      color: #0070fa;
      cursor: pointer;
      width: 100%;
      text-align: center;
      background: #fafafa;
      border-radius: 18px;
      border: 0px solid #e6e6e6;
      padding: 10px 0;
      margin-top: auto;
      margin-bottom: 20px;
    }

    #user_info {
      display: flex;
      align-items: center;
      // justify-content: center;
      margin-left: 12px;
      margin-top: 12px;
    }
  }

  #map_tools {
    background: #ffffff00;
    position: absolute;
    margin: 7px;
    right: 0;
    z-index: 999;
    top: 80px;
    // display: flex;
    // flex-direction: column;
    // justify-content: space-around;
    // align-items: center;

    width: 35px;
    // -webkit-box-shadow: 0 2px 4px 0 rgba(95, 95, 95, 0.2), 0 2px 4px 0 rgba(95, 95, 95, 0.19);
    // box-shadow: 0 2px 4px 0 rgba(95, 95, 95, 0.2), 0 2px 4px 0 rgba(95, 95, 95, 0.19);
    border-radius: 3px;
    text-align: center;
    opacity: 0.9;

    .tool {
      margin-top: 4px;
      border-radius: 50%;
      background-color: #3069c7;
      width: 35px;
      height: 35px;

      // display: flex;
      // flex-direction: column;
      // align-items: center;
      .btn-text {
        font-size: 12px;
        margin-top: -5px;
        color: rgba(0, 0, 0, 0.8);
      }

      .ttt {
        &::after {
          position: absolute;
          content: "";
          width: 30px;
          height: 1px;
          bottom: -5px;
          left: 5px;
          border-bottom: 1px solid rgba(0, 0, 0, 0.15);
        }
      }

      img {
        // height: 20px;
        // width: 20px;
        height: 25px;
        width: 25px;
        margin: 5px;
      }
    }
  }

  #map_lizi {
    margin: 10px;
    z-index: 999;
    position: fixed;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    // 正方形

    .lizi_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      background: #ffffff;
      box-shadow: 0px 0 3px 0px #e6e6e6;
      border-radius: 6px 6px 6px 6px;
      margin-bottom: 10px;
      padding: 5px;
      // 宽和高一样
      width: 50px;
      height: 50px;

      img {
        height: 18px;
      }

      div {
        font-family: "aliph400";
        font-size: 12px;
        color: #666666;
      }
    }
  }

  #pop {
    position: fixed;
    z-index: 999;

    #pop_main {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background: #ffffff;
      width: 300px;
      box-shadow: 0px 0px 3px 0px #e6e6e6;
      border-radius: 6px;

      #header {
        height: 45px;
        width: 100%;
        background: #f2f7fe;
        border-radius: 5px 5px 0px 0px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        // align-items: center;
        padding: 0 10px;
        // 阴影

        .header_item {
          width: 100%;
          display: flex;
          align-items: center;
          line-height: 20px;

          // 第一个元素 底部下划线
          &:first-child {
            color: #266df1;
          }

          &:last-child {
            color: #266df1;
          }
        }

        #h_jw {
          height: 12px;
          margin-right: 10px;
        }

        #h_jw_t {
          height: 13px;
          margin-right: 10px;
        }

        #h_close {
          height: 10px;
          margin-left: auto;
          margin-right: 6px;
        }

        div {
          font-family: "aliph500";
          font-weight: 500;
          font-size: 14px;
        }
      }

      #main {
        height: calc(100% - 28px);
        padding: 5px 10px;
        font-size: 14px;
        font-family: "aliph400";
        color: #1a1a1a;
      }

      #chart_img {
        position: absolute;
        right: 0;
        bottom: 0;
        height: 35px;
        margin: 7px;
      }

      &::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateY(50%) translateX(-50%);
        // border-top: 10px solid transparent;
        // border-bottom: 10px solid transparent;
        // border-left: 15px solid #000;
        // 向下的三角形
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 15px solid #ffffff;

        /* Arrow color */
        margin-top: -2px;
        /* Adjust arrow position */
      }
    }
  }

  #shumo {
    position: absolute;
    left: 0;
    z-index: 998;

    .shumo_i {
      background: #0a1935;
      box-shadow: 0px 0px 3px 0px #172f4e;
      border-radius: 12px;
      opacity: 0.65;
      width: 66px;
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 4px 12px;
      transition: background 0.2s;

      img {
        height: 14px;
        margin-right: 4px;
      }

      div {
        font-family: "aliph400";
        font-size: 14px;
        color: #ffffff;
      }
    }
  }

  #zh {
    width: 100%;
    background: url("../assets/img/底-bg.png");
    background-size: 100% 100%;
    position: absolute;
    bottom: 0px;
    left: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;

    #header {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        height: 14px;
      }

      span {
        font-family: "aliph500";
        font-weight: 500;
        font-size: 16px;
        color: #292933;
        padding: 0 28px;
      }
    }

    #day {
      margin: 0 12px;
      height: 94px;
      background: #f8f8f8;
      border-radius: 9px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 12px;

      .day_item {
        display: flex;
        align-items: center;

        img {
          height: 14px;
          margin-right: 7px;
        }

        .t {
          margin-right: 7px;
          font-size: 14px;
          font-family: "aliph400";
          color: #292933;
        }

        .v {
          font-size: 14px;
          font-family: "aliph400";
          color: #666666;
        }
      }
    }

    #hour {
      margin: 12px;
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: auto;

      .hour_item {
        // 需要腾出来24px的间隙，三个平分8px
        width: calc(33.33% - 8px);
        height: 100%;
        background: url("../assets/img/底.png");
        background-size: 100% 150px;
        // 不重复
        background-repeat: no-repeat;
        background-color: #ffffff;
        border-radius: 9px;

        // display: flex;
        // flex-direction: column;
        // justify-content: center;
        // align-items: center;
        .hour_title {
          font-family: "aliph500";
          font-weight: 500;
          font-size: 14px;
          color: #266df1;
          position: absolute;
          top: 0px;
          left: 50%;
          transform: translateX(-50%);
        }

        .wind_angle {
          display: flex;
          // justify-content: center;
          // justify-content: space-between;
          align-items: center;
          padding: 0 12px;

          img {
            height: 20px;
          }

          div {
            font-family: "aliph500";
            font-weight: 500;
            font-size: 14px;
            color: #266df1;
            margin-left: 8px;

            .t {
              font-family: "aliph500";
              font-weight: 500;
              font-size: 12px;
              color: #292933;
            }

            .v {
              font-family: "aliph400";
              font-weight: 400;
              font-size: 12px;
              color: #666666;
            }
          }
        }
      }
    }

    .zyb {
      // background-color: #f8fafc;
      border-radius: 8px;
      padding: 16px;
      // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
      max-height: 400px;
      overflow: auto;

      .report-meta {
        margin-bottom: 12px;
        display: flex;
        justify-content: flex-end;

        .publish-time {
          font-size: 12px;
          color: #666;
          display: inline-flex;
          align-items: center;

          .icon-clock {
            display: inline-block;
            width: 14px;
            height: 14px;
            margin-right: 4px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm.5-13H11v6l5.2 3.2.8-1.3-4.5-2.7V7z'/%3E%3C/svg%3E") no-repeat center;
          }
        }
      }

      .report-section {
        margin-bottom: 16px;

        .section-title {
          font-size: 15px;
          color: #1e88e5;
          margin: 0 0 8px 0;
          font-weight: 600;
          display: flex;
          align-items: center;

          &::before {
            content: "";
            display: inline-block;
            width: 4px;
            height: 14px;
            background-color: #1e88e5;
            margin-right: 8px;
            border-radius: 2px;
          }
        }

        .conclusion-text {
          margin: 0;
          font-size: 14px;
          line-height: 1.6;
          color: #333;
          text-align: justify;
          white-space: pre-line;
          /* 保留换行符 */
          text-indent: 2em;
          /* 首行缩进2字符 */
        }

        &.suggestion {
          background-color: #e3f2fd;
          padding: 12px;
          border-radius: 6px;
          border-left: 3px solid #1e88e5;


          .suggestion-text {
            margin: 0;
            font-size: 14px;
            line-height: 1.6;
            color: #0d47a1;
            font-weight: 500;
          }
        }
      }
    }


    #day_3 {
      margin: 12px;
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: auto;

      .day_item {
        display: flex;
        flex-direction: column;

        .day_h {
          background: #ffffff;
          border-radius: 6px 6px 6px 6px;
          border: 1px solid #b0c5ef;
          height: 40px;
          font-family: "aliph500";
          font-size: 14px;
          color: #292933;
          line-height: 14px;
          font-style: normal;
          text-transform: none;
          display: flex;
          align-items: center;
          margin-bottom: 10px;

          .img_t {
            height: 14px;
            margin-left: 15px;
            margin-right: 8px;
          }

          .img_x {
            height: 14px;
            margin-left: auto;
            margin-right: 18px;
          }
        }

        .day_m {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;

          .m_i {
            width: calc(33.33% - 8px);
            // height: 140px;
            background: #f4f7fd;
            border-radius: 9px 9px 9px 9px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            // justify-content: space-between;

            // img {
            //     height: 20px;
            //     width: 20px;
            //     margin-bottom: 7px;
            // }

            .fff {

              // flex: 1;
              .ttt {
                font-family: "aliph400";
                font-size: 12px;
                color: #737380;
                text-align: left;
                font-style: normal;
                text-transform: none;
              }

              .vvv {
                font-family: "aliph500";
                font-size: 14px;
                color: #31313e;
                text-align: left;
                font-style: normal;
                text-transform: none;
              }
            }

            .hour_header {
              display: flex;
              align-items: center;
              margin-bottom: 7px;

              img {
                height: 20px;
                width: 20px;
                margin-right: 7px;
              }

              span {
                font-family: "aliph500";
                font-size: 14px;
                color: #31313e;
              }
            }
          }
        }
      }
    }
  }

  #sz {
    width: 100%;
    background: #ffffff;
    position: absolute;
    bottom: 0px;
    // height: 50px;
    left: 0;
    z-index: 999;
    border-radius: 15px 15px 0px 0px;

    .weather-container {
      font-family: Arial, sans-serif;
      max-width: 100%;
      overflow: hidden;
      padding: 10px;
      // background-color: #f5f5f5;

      .title {
        text-align: center;
        margin-bottom: 15px;
        color: #333;
        font-size: 18px;
        font-weight: bold;
      }

      .scroll-wrapper {
        display: flex;
        // height: calc(100vh - 100px);
        overflow: hidden;
        position: relative;

        .fixed-column {
          // width: 80px;
          width: 40px;
          flex-shrink: 0;
          background-color: #f5f5f5;
          z-index: 2;

          .fixed-header {
            height: 20px;
          }

          .fixed-row {
            height: 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #4a90e270;
            font-size: 12px;
            font-weight: bold;
            border-radius: 4px 0 0 4px;
            margin-bottom: 5px;
            padding: 5px;
            box-sizing: border-box;

            span {
              font-size: 12px;
              font-weight: bold;
            }
          }
        }

        .scroll-container {
          flex: 1;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;

          .date-row,
          .time-row,
          .data-row {
            display: flex;
            margin-bottom: 5px;

            .date-cells,
            .time-cells,
            .data-cells {
              display: flex;

              .date-cell,
              .time-cell,
              .data-cell {
                width: 60px;
                flex-shrink: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                border-right: 1px solid #ddd;
                border-bottom: 1px solid #ddd;
                font-size: 12px;
                box-sizing: border-box;
                background-color: #fff;

                .value {
                  // margin: 2px 0;
                  font-weight: bold;
                  // border-bottom: ;
                  width: 100%;
                  height: 100%;
                  text-align: center;
                  // border-bottom: 1px solid #ddd;
                  display: flex;
                  align-items: center;
                  justify-content: center;

                  // 白色
                  color: #fff;
                  // 阴影
                  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
                }

                .arrow {
                  font-size: 14px;
                  // margin-top: 2px;
                }
              }

              .date-cell {
                height: 30px;
                justify-content: space-around;
                border-right: none;

                div {
                  font-size: 11px;

                  &:first-child {
                    font-weight: bold;
                  }
                }
              }

              .time-cell {
                height: 30px;
                font-weight: bold;
              }

              .data-cell {
                height: 50px;
              }
            }
          }
        }
      }

      // 响应式调整
      // @media (max-width: 480px) {
      //   .scroll-wrapper {
      //     .fixed-column {
      //       width: 40px;

      //       .fixed-row {
      //         font-size: 11px;

      //       }
      //     }

      //     .scroll-container {

      //       .date-row,
      //       .time-row,
      //       .data-row {

      //         .date-cells,
      //         .time-cells,
      //         .data-cells {

      //           .date-cell,
      //           .time-cell,
      //           .data-cell {
      //             width: 50px;
      //             font-size: 11px;
      //           }
      //         }
      //       }
      //     }
      //   }
      // }
    }

    .sz_t {
      font-family: "aliph500";
      font-weight: 500;
      font-size: 14px;
      color: #292933;
      border-radius: 18px 18px 18px 18px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      transition: background 0.3s, color 0.3s;
    }

    img {
      height: 15px;
      width: 30px;
      position: absolute;
      top: -15px;
      left: 50%;
      transform: translateX(-50%);
    }

    #header {
      height: 36px;
      background: #f5f5f5;
      border-radius: 6px;
      margin: 16px 12px 0 12px;
      font-size: 12px;
      font-family: "aliph400";
      color: #292933;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #chart_main {
      width: 100%;
      height: 248px;
    }
  }

  .tide-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f5f7fa;
    z-index: 999;

    :deep(.el-date-editor) {
      width: calc(100% - 50px);
    }

    .header {
      padding: 10px 20px;
      // background: #fff;
      // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

      // .el-date-picker {
      //   width: 200px;
      // }
      display: flex;
      justify-content: space-between;
      // width: 100%;
      width: calc(100% - 50px);
      margin-top: 10px;
      align-items: center;
      flex-direction: column;

      #t_p {
        display: flex;
        align-items: center;
        width: 100%;

        .p_i {
          height: 38px;
          padding: 1px 11px;
          box-shadow: 0 0 0 1px #dcdfe6 inset;
          border-radius: 4px;
          background-color: #ffffff;
          color: #606266;
          display: flex;
          align-items: center;
          flex: 1;
        }
      }
    }

    .table-wrapper {
      flex: 1;
      // padding: 20px;
      overflow: auto;

      // 表格样式
      .el-table {
        height: 100% !important;

        // 条纹样式
        :deep(.stripe-row) {
          background-color: #fafafa;
        }

        // 表头样式
        .el-table__header {
          th {
            background-color: #f8f9fc;
            color: #606266;
          }
        }

        // 滚动条样式
        &::-webkit-scrollbar {
          width: 6px;
          height: 6px;
        }

        &::-webkit-scrollbar-thumb {
          background: #c1c1c1;
          border-radius: 3px;
        }
      }
    }
  }

  #cx {
    width: 100%;
    background: #ffffff;
    position: absolute;
    bottom: 0px;
    left: 0;
    z-index: 999;
    border-radius: 15px 15px 0px 0px;

    img {
      height: 15px;
      width: 30px;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }

    #header {
      height: 36px;
      // background: #F5F5F5;
      border-radius: 6px;
      margin: 16px 12px 0 12px;
      font-size: 12px;
      font-family: "aliph400";
      color: #292933;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    #chart_main {
      width: 100%;
      height: 248px;
    }

    #table_main {
      width: 100%;
      // height: calc(100vh - 72px - 36px - 30px);
      // height: 400px;

    }
  }

  #zb {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    bottom: 0px;
    z-index: 999;
    background-color: #eef2f7;
    width: 100%;
    padding-top: 40px;

    .zyb {
      border-radius: 8px;
      padding: 16px;
      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
      overflow: auto;
      max-height: 50%;
      width: 100%;

      .report-meta {
        margin-bottom: 12px;
        display: flex;
        justify-content: flex-end;

        .publish-time {
          font-size: 12px;
          color: #666;
          display: inline-flex;
          align-items: center;

          .icon-clock {
            display: inline-block;
            width: 14px;
            height: 14px;
            margin-right: 4px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm.5-13H11v6l5.2 3.2.8-1.3-4.5-2.7V7z'/%3E%3C/svg%3E") no-repeat center;
          }
        }
      }

      .report-section {
        margin-bottom: 16px;

        .section-title {
          font-size: 15px;
          color: #1e88e5;
          margin: 0 0 8px 0;
          font-weight: 600;
          display: flex;
          align-items: center;

          &::before {
            content: "";
            display: inline-block;
            width: 4px;
            height: 14px;
            background-color: #1e88e5;
            margin-right: 8px;
            border-radius: 2px;
          }
        }

        .conclusion-text {
          margin: 0;
          font-size: 14px;
          line-height: 1.6;
          color: #333;
          text-align: justify;
          white-space: pre-line;
          text-indent: 2em;
        }

        &.suggestion {
          background-color: #e3f2fd;
          padding: 12px;
          border-radius: 6px;
          border-left: 3px solid #1e88e5;

          .suggestion-text {
            margin: 0;
            font-size: 14px;
            line-height: 1.6;
            color: #0d47a1;
            font-weight: 500;
          }
        }
      }
    }

    .zyb_list {
      width: 100%;
      padding: 16px;
      background-color: #fff;
      border-radius: 12px 12px 0 0;
      box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
      flex: 1;
      overflow-y: auto;

      .list-title {
        font-size: 16px;
        color: #333;
        margin: 0 0 16px 0;
        padding-bottom: 8px;
        border-bottom: 1px solid #eee;
        font-weight: 600;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: -1px;
          width: 60px;
          height: 2px;
          background-color: #1e88e5;
        }
      }

      .list-container {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .list-item {
        display: flex;
        align-items: center;
        padding: 12px;
        background-color: #f9f9f9;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;

        &.active {
          background-color: #e3f2fd;
          border-left: 4px solid #1e88e5;
        }

        &:hover {
          background-color: #f0f7ff;
          transform: translateY(-2px);
          box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
        }

        .item-date {
          font-size: 14px;
          color: #1e88e5;
          font-weight: 500;
          min-width: 100px;
        }

        .item-summary {
          flex: 1;
          font-size: 13px;
          color: #666;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          padding: 0 8px;
        }

        .icon-arrow {
          display: inline-block;
          width: 16px;
          height: 16px;
          background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center;
          opacity: 0.6;
          transition: all 0.2s;
        }

        &:hover .icon-arrow {
          opacity: 1;
          transform: translateX(2px);
        }
      }
    }
  }

  #hb {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #eef2f7;
    width: 100%;
    padding-top: 40px;
    z-index: 999;

    .report-container {
      width: 100%;
      padding: 20px;
      max-width: 800px;
      margin: 0 auto;
      overflow: auto;

      .section-title {
        color: #2c3e50;
        border-bottom: 2px solid #3498db;
        padding-bottom: 8px;
        margin: 20px 0;
      }

      .pdf-item {
        padding: 12px 20px;
        margin: 8px 0;
        background: #f8f9fa;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
        border: 1px solid #e0e0e0;

        &:hover {
          background: #e3f2fd;
          transform: translateX(10px);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        &.current {
          border-left: 4px solid #3498db;
        }

        &.history {
          border-left: 4px solid #95a5a6;
        }
      }

      @media (max-width: 768px) {
        padding: 10px;

        .pdf-item {
          padding: 10px 15px;
          font-size: 14px;
        }
      }
    }
  }

  #zhai {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #eef2f7;
    width: 100%;
    padding-top: 40px;

    .jb {
      border-radius: 8px;
      padding: 16px;
      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;

      .report-meta {
        margin-bottom: 12px;
        display: flex;
        justify-content: flex-end;

        .publish-time {
          font-size: 12px;
          color: #666;
          display: inline-flex;
          align-items: center;

          .icon-clock {
            display: inline-block;
            width: 14px;
            height: 14px;
            margin-right: 4px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm.5-13H11v6l5.2 3.2.8-1.3-4.5-2.7V7z'/%3E%3C/svg%3E") no-repeat center;
          }
        }
      }

      .report-section {
        margin-bottom: 16px;

        .section-title {
          font-size: 15px;
          color: #e53935;
          /* 使用红色强调警报 */
          margin: 0 0 8px 0;
          font-weight: 600;
          display: flex;
          align-items: center;

          &::before {
            content: "";
            display: inline-block;
            width: 4px;
            height: 14px;
            background-color: #e53935;
            margin-right: 8px;
            border-radius: 2px;
          }
        }

        .conclusion-text {
          margin: 0;
          font-size: 14px;
          line-height: 1.6;
          color: #333;
          text-align: justify;
          white-space: pre-line;
          text-indent: 2em;
        }

        &.warning-conclusion {
          border-left: 3px solid #e53935;
          padding-left: 12px;
        }

        &.suggestion {
          background-color: #ffebee;
          padding: 12px;
          border-radius: 6px;

          .suggestion-text {
            margin: 0;
            font-size: 14px;
            line-height: 1.6;
            color: #c62828;
            font-weight: 500;
          }

          &.warning-suggestion {
            border-left: 3px solid #e53935;
          }
        }
      }
    }

    .jb_list {
      flex: 1;
      width: 100%;
      padding: 16px;
      background-color: #fff;
      border-radius: 12px 12px 0 0;
      box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
      margin-top: 16px;
      overflow-y: auto;

      .list-title {
        font-size: 16px;
        color: #333;
        margin: 0 0 16px 0;
        padding-bottom: 8px;
        border-bottom: 1px solid #eee;
        font-weight: 600;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: -1px;
          width: 60px;
          height: 2px;
          background-color: #e53935;
        }
      }

      .list-container {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .list-item {
        display: flex;
        align-items: center;
        padding: 12px;
        background-color: #fff;
        border-radius: 8px;
        border-left: 4px solid #e53935;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

        &.active {
          background-color: #ffebee;
          border-left: 4px solid #e53935;
        }

        &:hover {
          background-color: #ffebee;
          transform: translateY(-2px);
          box-shadow: 0 2px 8px rgba(229, 57, 53, 0.1);
        }

        .item-date {
          font-size: 14px;
          color: #e53935;
          font-weight: 500;
          min-width: 100px;
        }

        .item-summary {
          flex: 1;
          font-size: 13px;
          color: #666;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          padding: 0 8px;
        }

        .icon-arrow {
          display: inline-block;
          width: 16px;
          height: 16px;
          background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center;
          opacity: 0.6;
          transition: all 0.2s;
        }

        &:hover .icon-arrow {
          opacity: 1;
          transform: translateX(2px);
        }
      }
    }
  }


  #file {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    // padding-bottom: 72px;
    position: absolute;
    bottom: 0px;
    z-index: 999;
    background-color: #eef2f7;
    width: 100%;
    padding-top: 40px;

    .zhai_no_img {
      width: 50%;
      margin: 10px;
    }

    .zhai_no_txt {
      font-size: 24px;
      color: #666;
      opacity: 0.6;
      letter-spacing: 4px;
      font-family: "aliph500";
      width: calc(100% - 24px);
      text-align: center;
      padding-bottom: 10px;
    }

    .zhai_his {
      width: calc(100% - 24px);
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #ffffff;
      margin: 5px 12px;
      border-radius: 9px;
      overflow: auto;
      flex: 1;
      padding: 0 7px;

      // max-height: calc(100vh - 72px - 40px - 60px);
      .his_item1 {
        display: flex;
        padding: 10px;
        width: 100%;
        font-size: 16px;
        font-family: "aliph400";
        justify-content: space-between;
        border-bottom: 1px solid #e6e6e6;

        .his_time {
          // width: 20%;
          flex: 3;
          color: #666;
          font-size: 14px;
          white-space: normal;
          word-break: break-word;
          // 居中
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .his_value {
          // width: 65%;
          flex: 6.5;
          padding: 0 10px;
          color: #333;
          font-size: 14px;
          white-space: normal;
          word-break: break-word;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .his_look {
          // width: 15%;
          flex: 1.5;
          color: #1890ff;
          font-size: 14px;
          cursor: pointer;
          text-align: right;
          white-space: nowrap;
          display: flex;
          justify-content: center;
          align-items: center;

          &:hover {
            text-decoration: underline;
          }
        }
      }

    }

    .zhai_t {
      font-family: "aliph500";
      font-weight: 500;
      font-size: 16px;
      letter-spacing: 0.5px;
      color: #292933;
      border-radius: 18px 18px 18px 18px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      background: #ffffff;
      transition: background 0.3s, color 0.3s;
    }
  }


  #jb_home {
    position: fixed;
    left: 0;
    top: 70px;
    // 右边圆角
    z-index: 999;

    .jb_home_item {
      border-radius: 0px 10px 10px 0px;
      padding: 3px 0;
      margin-bottom: 5px;
      display: flex;
      align-items: center;

      .jb_title {
        color: #ffffff;
        font-family: "aliph400";
        font-size: 16px;
        margin-left: 10px;
      }

      img {
        height: 50px;
        margin-left: 5px;
        margin-right: 5px;
      }
    }
  }

  #nv {
    width: 100%;
    background: #ffffff;
    // box-shadow: 0px -1px 6px 0px rgba(204, 204, 204, 0.29);
    box-shadow: 1px 0 6px 0px #cccccc;
    z-index: 99999;

    #nv_in {
      height: 41px;
      margin: 12px;
      margin-bottom: 20px;
      background: #f2f6fc;
      border-radius: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 6px;

      .nv_i {
        width: 25%;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-family: "aliph500";
        font-weight: 500;
        color: #1a1a1a;
        cursor: pointer;
        transition: background 0.3s, color 0.3s;

        &.active {
          background: #266df1;
          color: #ffffff;
          border-radius: 20px;
        }
      }
    }
  }

  #scalar {
    position: fixed;
    // bottom: 500px;
    top: 0;
    left: 0;
    margin: 12px;
    z-index: 999;
    width: 200px;
    height: 25px;
    background: linear-gradient(to right,
        rgb(98, 113, 184),
        rgb(98, 113, 184),
        rgb(98, 113, 184),
        rgb(98, 113, 184),
        rgb(61, 110, 163),
        rgb(74, 148, 170),
        rgb(74, 146, 148),
        rgb(77, 142, 124),
        rgb(76, 164, 76),
        rgb(103, 164, 54),
        rgb(162, 135, 64),
        rgb(162, 109, 92),
        rgb(141, 63, 92),
        rgb(151, 75, 145),
        rgb(95, 100, 160),
        rgb(91, 136, 161),
        rgb(91, 136, 161));
  }

  #sth {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 998;
    width: 100%;
    height: 30px;
    // background: #FFFFFF;
    display: flex;
    // justify-content: center;
    margin-left: 12px;
    align-items: center;
    font-size: 12px;
    font-family: "aliph400";
    color: #666666;
  }

  #tftl {
    position: fixed;
    right: 0;
    bottom: 500px;
    margin: 12px;
    z-index: 999;

    img {
      height: 25px;
    }

    .tftl_i {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 12px;
      padding: 1px 5px;
      background-color: #ffffff;
      margin-bottom: 7px;
      border-radius: 7px;
      // color: rgb(50, 49, 49);
    }

  }

  #sm_date {
    position: fixed;
    top: 40px;
    transform: translateX(-50%);
    left: 50%;
    z-index: 998;
    font-size: 17px;
    white-space: nowrap;
    font-weight: bolder;
    background-color: #b5d0ed;
    color: #0070fa;
    font-family: "alimama";
    padding: 2px 5px;
  }

  .wjb {
    position: fixed;
    top: 40px;
    left: 0px;
    z-index: 998;
    font-size: 20px;
    white-space: nowrap;
    font-weight: bolder;
    background-color: #b5d0ed;
    font-family: "deyi";
    padding: 2px 5px;
    // 右上和右下圆角7px
    border-radius: 0px 5px 5px 0px;
  }
}

#scalarlegend {
  position: absolute;
  z-index: 405;
  top: 10px;
  left: 10px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  width: calc(100% - 20px);
  padding: 0 3px;

  .legend-item {

    color: #ffffff;

    flex: 1;
    height: 25px;
    text-align: center;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

}

.van-overlay {
  background: #00000000;
}

:deep(.el-switch.is-checked .el-switch__core) {
  background-color: rgb(0, 195, 255);
  border-color: rgb(0, 195, 255);
}
</style>
